react新的生命周期函数getDerivedStateFromProps

Posted 2023-04-24

参考技术A

getDerivedStateFromProps 的 作用 是为了让 props 能更新到组件内部 state 中。他会在 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state ，如果返回 null 则不更新任何内容。但注意在没有内容更新的情况下也一定要返回一个 null 值。不然会报错。

这个生命周期的意思就是从props中获取state，这个生命周期替换了原有的生命周期函数 componentWillReceiveProps , getDerivedStateFromProps ,它
是一个静态函数，也就是说不能通过this来访问class的属性，也不 推荐直接访问属性 。而是通过参数提供的 nextPros 以及 prevState 来进行判断，根据新传入的 props 来映射 state 。
注意： 如果传入的props不影响state，则必须返回一个null，一般尽量写在末尾。

在使用此生命周期时，要注意把传入的 props 值和之前传入的 props 进行比较

react学习记录——状态属性生命周期

react的状态state

　　React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）

class Clock extends React.Component 
  constructor(props) 
    super(props);
    this.state = date: new Date();
  

  componentDidMount() 
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  

  componentWillUnmount() 
    clearInterval(this.timerID);
  

  tick() 
    this.setState(
      date: new Date()
    );
  

  render() 
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>现在是 this.state.date.toLocaleTimeString().</h2>
      </div>
    );
  


ReactDOM.render(
  <Clock />,
  document.getElementById(‘example‘)
);

　　1、通过上边的代码可以看出页面中显示的时间是在state中的，但是在设置计时器后，没过一秒重新更新state的值，页面中显示出来的也会每隔一秒变化一次，说明页面中的内容是跟随数据的变化实时变化的，

　　2、时间的变化是因为在tick函数中进行了state的改变，而tick函数中改变state的值是在setState中执行的，所以state的值不能直接改变state，要通过setstate来改变

　　3、设置计时器和清除计时器是在两个函数中执行的，这两个函数是生命周期的钩子函数

react的属性props

　　react中的props属性是从父组件中获取的，也可以设置默认的属性，如果父组件没有传值的时候直接使用默认的属性

　　

class HelloMessage extends React.Component 
  render() 
    return (
      <h1>Hello, this.props.name</h1>
    );
  

 
HelloMessage.defaultProps = 
  name: ‘Runoob‘
;
 //此处如果传入name值使用的是给定的值，如果没有传入值的话使用的是Runoob
const element = <HelloMessage/>;
 
ReactDOM.render(
  element,
  document.getElementById(‘example‘)
);

　　props属性是不能被修改的，如果使用需要被修改的值要用state来代替props

react的生命周期

 

组件的生命周期可分成三个状态：

 

• Mounting：已插入真实 DOM
• Updating：正在被重新渲染
• Unmounting：已移出真实 DOM

生命周期的方法有：

• componentWillMount 在渲染前调用,在客户端也在服务端。

• componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。

• componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。

• shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 
  可以在你确认不需要更新组件时使用。

• componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

• componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。

• componentWillUnmount在组件从 DOM 中移除之前立刻被调用。