react之组件

组件的种类

1. DOM元素组件：全部小写，比如<vvv>这是一个标签</vvv>;
2. 自定义组件：首字母大写，比如<People/>。

如何得到一个自定义组件？

1. 使用函数声明

function People() {
    return (
        <div className="people">
        <h1>我是people</h1>
        <p>你好，people</p>
        </div>
    );
};

1. 使用类声明

class Men extends React.Component {
    render() {
        return (
            <div className="men">
            <h1>我是men</h1>
            <p>你好，men</p>
            </div>
        );
    }
}

• 组件之间可以相互嵌套；
• 将每个组件放入单独的js文件中，用的时候直接导入即可；
• 在自定义属性里面可以写一些属性，接上一些值；
• 在函数组件里面，通过第一个参数来接受props；
• 在类组件中，通过组件实例下面的props；
• 数据总是从顶层流向底层：单向数据流；
• 在页面上渲染null，{null}，不会有任何表现，就是空的；

children

自定义的标签写的内容就是props.children

defaultProps

当自定义标签没有传入该属性或传入的该属性值为undefined时启用。
语法（跳出类和函数体，在外面写）：

People.defaultProps = {
    name: '-------',
    age: 20,
    rP: f=>f
};

prop-types

限制传入的属性的值的种类。
语法（和跳出类和函数体，在外面写）：

//先要导入一个东西
import PT from 'prop-types'
//......
People.propTypes = {
//还可以验证 array bool object symbol node 
//node 就是可以渲染的东西，包括：element、string、number、[node]
    name: PT.string,
    rP: PT.func,
    age: PT.number.isRequired
};

State

只有类组件才有状态！

setState

流程：

1. 更新this.state的值；
2. render方法再次执行，生成新的virtual DOM结构；
3. 比较新旧virtual DOM，对变化的部分，更新浏览器中相应的DOM；

• 在类组件里构造函数中，如果要访问props属性，需要向constructor函数传一个props参数，向super函数也传一个props参数，接下来你既可以使用props也可以使用this.props；

合并更新

一个事件循环里，会将所有的this.setState合并，只调用一次render函数；

异步更新

在render函数没结束前，this.state.XXXX永远表示上一个状态。要等render结束后才会更新状态。

如何在render里访问新的state？

<button onClick = {()=>{
                this.setState({
                    name: 'tweety',
                    number: ++number
                });
                
                this.setState((newState,props)=>{
//通过这个newState就可以访问新的state了。
                    console.log(newState);
                    return{
                        name:'Flora',
                        number:newState.number === 2 ? 2:0
                    };
                });
            }}>change number</button>