美文网首页Web前端之路React
React状态和生命周期

React状态和生命周期

作者: iqing2012 | 来源:发表于2017-10-29 21:29 被阅读12次

    用类定义的组件有一些额外的特性。 这个"类专有的特性", 指的就是局部状态。

    • 类允许我们在其中添加本地状态(state)和生命周期钩子。

    正确地使用 State(状态)

    不要直接修改 state(状态)#
    例如,这样将不会重新渲染一个组件:
    // 错误this.state.comment = 'Hello';

    用 setState()
    代替:
    // 正确 this.setState({comment: 'Hello'});

    唯一可以分配 this.state的地方是构造函数。

    state(状态) 更新可能是异步的

    React 为了优化性能,有可能会将多个 setState() 调用合并为一次更新。

    因为 this.props 和 this.state 可能是异步更新的,你不能依赖他们的值计算下一个state(状态)。

    • 要弥补这个问题,使用另一种 setState() 的形式,它接受一个函数而不是一个对象
    this.setState((prevState, props) => ({
      counter: prevState.counter + props.increment
    }));
    

    数据向下流动

    • 无论作为父组件还是子组件,它都无法获悉一个组件是否有状态,同时也不需要关心另一个组件是定义为函数组件还是类组件。

    • 这就是 state(状态) 经常被称为 本地状态 或 封装状态的原因。 它不能被拥有并设置它的组件 以外的任何组件访问。

    一个组件可以选择将 state(状态) 向下传递,作为其子组件的 props(属性):
    

    相关文章

      网友评论

        本文标题:React状态和生命周期

        本文链接:https://www.haomeiwen.com/subject/flnypxtx.html