React学习

来源：互联网发布：windows snmpwalk 编辑：程序博客网时间：2024/05/22 17:38

React拥有独有的语法，jsx语法。

使用React至少需要3个包的支持：

react.js:React核心库

react-dom.js:React与DOM相关的操作库

Browser.js:将JSX语法解析成JavaScript语法，这一步比较耗时，最好放在服务端完成。

一般在node.js情况下，我们会使用如下命令安装React:

cnpm install --save-dev react react-dom

ReactDOM.render()是React的基本语法，作用是将HTML模版插入指定的DOM对象中。

ReactDOM.render(  <h1>Hello, world!</h1>,  document.getElementById('example'));

JSX语法的规则：

1.遇到<开头就用HTML规则解析，遇到{开头就用JavaScript规则解析。

ReactDOM.render(  <div>    <h1>this value id {3+2}</h1>  </div>,  document.getElementById('example'));

2.JSX语法中不需要任何引号。

3.允许直接在模版中插入变量。（使用｛｝包裹起来即可）

4.所有的组件都是一个状态机，初始化有一状态，通过状态改变实现用户交互。(在之后组件模块详讲)

5.当插入多个组件时，需要一个外部元素将所有组件包裹起来。

ReactDOM.render(  <div>    <h1>Hello, world!</h1>    <h1>Hi, React!</h1>  </div>,  document.getElementById('example'));

6.所有的组件首字母大写，html标签首字母小写。

ReactDOM.render(  <div>    <h1>Hello, world!</h1>//html标签    <Test />//组件  </div>,  document.getElementById('example'));

7.所有的属性命名采用驼峰式。

HolloTest = React.createClass({    render: function () {        let style = {"color":"blue","fontSize":"24px"};        return (            <div style={style}>                hello,this is my first demo!            </div>        );    }});

这里设置字体大小使用的是fontSize,如果使用font-size则不被支持。

特别注意:data-*、aria-*是允许的，其他属性的-都需要去掉，替换为驼峰名。

组件

React允许将代码封装成组件，然后在网页中插入这些组件。

组件创建

ES5下创建组件

let React = require('react');let HolloTest;HolloTest = React.createClass({    render: function () {        let style = {"color":"blue","fontSize":"24px"};        return (            <div style={style}>                hello,this is my first demo!            </div>        );    }});module.exports = HolloTest;

ES6下创建组件

import React from 'react';export default class ContentTest extends React.Component{    render(){        return (            <div>oh,my second test is successfully! </div>        )    }}

需要注意：
1）获取组件属性的值用的是this.props.属性名。

2）创建的组件名称首字母必须大写。

3）为元素添加css的class时，要用className。

4）组件的style属性的设置方式也值得注意，要写成style={{width: this.state.witdh}}。

5）html中的for属性需要替换为htmlFor。

组件属性

所有的组件属性都可以通过this.props.属性名获取。但是this.props.children不是组件属性，而表示组件下的所有子节点。

当组件没有子节点时this.props.children为undefined，当有一个节点为Object，当有多个节点为Array。

官网提供了一个React.Children方法来处理子节点，这样就不用考虑数据类型的问题了。

我们可以使用React.Children.map来遍历子节点。

import React from 'react';export default class RuleDemo1 extends React.Component{    render(){        return (            <div>                <ol>                    {                        React.Children.map(this.props.children, function (child) {                            return <li>{child}</li>;                        })                    }                </ol>                <div>I am is props name:{this.props.name}</div>            </div>        )    }}

import React from 'react';import HolloTest from './HolloTest.js';import ContentTest from './ContentTest.js';import RuleDemo1 from "./RuleDemo1";export default class DemoApp extends React.Component{    render(){        return (            <div>                <HolloTest/>                <ContentTest/>                <RuleDemo1 name="test">                    <h1>my is child one</h1>                    <h1>my is child two</h1>                </RuleDemo1>            </div>        )    }}

效果如下：

默认属性设置

import React from 'react';export default class RuleDemo2 extends React.Component{    constructor(props){        super(props)        this.state = {ds:"defaultState"}    }    render(){        return (            <div>                <div>通过state状态设置默认属性:{this.state.ds}</div>                <div>通过实例设置默认属性:{this.props.dm}</div>            </div>        )    }}RuleDemo2.defaultProps = {    dm:"classProps"}

注意：网上好多说使用

static defalutProps = {     name:"test"}

static 是es7的草案，在es6中并不支持，所以会报错。需要引入babel-preset-stage-0

效果如下：

通过state状态设置默认属性:defaultState通过实例设置默认属性:classProps

组件状态

React将所有的组件都看成一个状态机，一开始有个默认状态，然后通过用户互动来修改状态，重新渲染UI。

import React from 'react';export default class RuleDemo2 extends React.Component{    constructor(props){        super(props)        this.state = {value:"defaultState"}    }    handleClick(){        this.setState({value:"newValue"})    }    handleChange(event){        this.setState({value:event.target.value})    }    render(){        return (            <div>                <input type="text" value={this.state.value} onChange={this.handleChange.bind(this)}/>                <button onClick={this.handleClick.bind(this)}>点我啊</button>            </div>        )    }}

上面例子实现了点击按钮修改文本框默认值的功能。

需要注意以下几点：

1.ES6中绑定事件的时候必须绑定this，否则在事件方法中不能获取到组件对象。如果需要传参的的话也在bind()中传递，例如：this.handleClick.bind(this,index)。第一个参数必须是this。

2.所有的input和textara都支持defalutValue属性来设置默认值。

3.checkbox可以通过defalutChecked来设置默认值。

4.所有的表单元素必须绑定onChange事件，因为react提倡约束性表单，所有的改变都由react来控制，不然控制台将给出警告提示。

5.状态改变只能通过this.setState()方法去实现。

组件生命周期

组件的生命周期分成三个状态：

Mounting：已插入真实 DOM

Updating：正在被重新渲染

Unmounting：已移出真实 DOM

React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

componentWillMount()：在渲染前调用,在客户端也在服务端。

componentDidMount()：在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。

componentWillUpdate(object nextProps, object nextState)：在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

componentDidUpdate(object prevProps, object prevState)：在组件完成更新后立即调用。在初始化时不会被调用。

componentWillUnmount()：在组件从 DOM 中移除的时候立刻被调用。

此外，React 还提供两种特殊状态的处理函数。

componentWillReceiveProps(object nextProps)：在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。

shouldComponentUpdate(object nextProps, object nextState)：返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用，即是组件重新渲染的时候被调用。

import React from 'react';export default class RuleDemo2 extends React.Component{    constructor(props){        super(props)        this.state = {value:"defaultState",enable:false}    }    componentDidMount(){//组件生命周期        this.setState({enable:true})    }    handleClick(){        this.setState({value:"newValue",enable:false})    }    handleChange(event){        this.setState({value:event.target.value})    }    render(){        return (            <div>                <input type="text" value={this.state.value}                       onChange={this.handleChange.bind(this)}                       readOnly={this.state.enable}/>                <button onClick={this.handleClick.bind(this)}>点我啊</button>            </div>        )    }}

上面例子，在DOM结构生成之后，让文本框只读，在点击按钮之后才解除只读模式。

0 0