1、State 与 props 类似,都是组件使用的数据,但是 state 是私有的,并且完全受控于当前组件,即可修改。
2、组件中的render函数
在组件初始化时会调用一次,并且在组件更新的每一次都会执行一次,即state变更时,所以总是渲染最新的组件状态state,以达到响应式渲染
3、组件的初始化,但只要在相同的 DOM 节点中渲染 同一个组件<Clock /> ,就仅有一个 Clock 组件的 class 实例被创建使用,以后就是组件的更新
4、关于继承父组件的props (es6)
// Class 组件应该始终使用 props 参数来调用父类的构造函数。即super(props)
// es6中的关键词super,它指代父类的实例(即父类的this对象)
// 子类必须在constructor中调用super方法,否则新建实例会报错
// 这是因为子类没有自己的this对象,而是继承了父类的this对象,然后对其进行加工
// 如果不调用super方法,子类就得不到this对象
// 主要原因是,ES5的继承机制是先创建子类实例对象this,然后再将父类方法属性添加到this上
// 而ES6的继承机制完全不同,它是先创建父类的实例对象this(所以必须先调用this),然后在用子类的构造函数修改this进行扩展
5、关于state主要三点:
1)不要直接修改state,使用setState才会重新渲染页面
构造函数是唯一可以给 this.state 赋值的地方,即state的初始化
2)State 的更新可能是异步的
因为 this.props 和 this.state 可能会异步更新,所以你不要依赖他们的值来更新下一个状态。
3)State 的更新会被合并,setState并不会立即改变state的值,而是将其放到一个任务队列里,最终将多个setState合并,一次性更新页面
6、React设计setState方法就是为了重新渲染页面
主要是setState触发页面重新渲染, 需要经过以下生命周期:
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDidUpdate
state的值只有在render的时候才真正被修改了
7、生命周期
componentWillMount: 在渲染前调用,在客户端也在服务端。
componentDidMount : 在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用,
可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
componentWillReceiveProps: 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
shouldComponentUpdate :返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 可以在你确认不需要更新组件时使用。
componentWillUpdate:在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
componentDidUpdate: 在组件完成更新后立即调用。在初始化时不会被调用。
componentWillUnmount:在组件从 DOM 中移除的时候立刻被调用。