4、ReactJs基础知识04--state&&生命周期

时间：2020-02-10 21:37:26 阅读：71 评论：0 收藏：0 [点我收藏+]

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触发页面重新渲染，需要经过以下生命周期：

　　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 中移除的时候立刻被调用。

原文：https://www.cnblogs.com/gopark/p/12292146.html

踩

(0)

评论一句话评论（0）

分享档案

更多>