• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

[10 MINS/DAY] React lifecycle [1]

互联网 diligentman 2周前 (10-15) 12次浏览

[10 MINS/DAY] React lifecycle [1]

[10 MINS/DAY] React lifecycle [1]

本篇的内容大部分来自于学习https://reactjs.org/和https://www.w3schools.com/react/react_lifecycle.as的笔记

React 生命周期 = Mounting + Updating + UnMounting

  1. Mounting: 把元素放入DOM中。

    • constructor()
    • getDerivedStateFromProps()
    • render()
    • componentDidMount()
  2. Updating: Component的State或者Props在改变。

    • getDerivedStateFromProps()
    • shouldComponentUpdate()
    • render()
    • getSnapshotBeforeUpdate()
    • componentDidUpdate()
  3. UnMounting: 组件从DOM被移除

    • componentWillUnmount()
  • Constructor – constructor(props)

如果我们不初始化state,也不绑定方法,那就不用为组件实现构造函数。

一个组件在挂载之前会调用构造函数。 在为 React.Component 子类实现构造函数时,应在其他语句之前前调用 super(props)。否则,this.props 在构造函数中可能会出现未定义的 bug。

通常,在 React 中,构造函数仅用于以下两种情况:

  • Initializing: 通过给 this.state 赋值对象来初始化内部 state。
  • Binding: 为事件处理函数绑定实例

constructor() 函数中不要调用 setState() 方法。如果我们的组件需要使用内部 state,请直接在构造函数中为 this.state 赋值初始 state:

constructor(props) {
  super(props);
  // Don't call this.setState() here!
  this.state = { counter: 0 };
  this.handleClick = this.handleClick.bind(this);
}

只能在构造函数中直接为 this.state 赋值。如需在其他方法中赋值,你应使用 this.setState() 替代。.

要避免在构造函数中引入任何副作用或订阅。如遇到此场景,请将对应的操作放置在 componentDidMount 中.

Note

避免将 props 的值复制给 state!这是一个常见的错误:

constructor(props) {
 super(props);
 // Don't do this!
 this.state = { color: props.color };
}

如此做毫无必要(我们可以直接使用 this.props.color),同时还产生了 bug(更新 prop 中的 color 时,并不会影响 state)。

只有在我们刻意忽略 prop 更新的情况下使用。此时,应将 prop 重命名为 initialColordefaultColor。必要时,我们可以修改它的 key,以强制“重置”其内部 state。比如:

class EmailInput extends Component {
  state = { email: this.props.defaultEmail };

  handleChange = event => {
    this.setState({ email: event.target.value });
  };

  render() {
    return <input onChange={this.handleChange} value={this.state.email} />;
  }
}

出现 state 依赖 props 的情况该如何处理, 官方给出博客:避免派生状态,之后等学习到getDerivedStateFromProps() 生命周期再学习。


程序员灯塔
转载请注明原文链接:https://www.wangt.cc/2020/10/10-mins-day-react-lifecycle-1/
喜欢 (0)