React17版本新的生命周期

在这里插入图片描述
在这里插入图片描述
新版本react的生命周期里,这3个生命周期钩子函数前面要加上UNSAFE_, 不然会有警告

在这里插入图片描述
在这里插入图片描述

getDerivedStateFromProps这个生命周期钩子这样写会报错:
在这里插入图片描述
在这里插入图片描述
我们加上static关键字:
在这里插入图片描述
还是报错:
在这里插入图片描述
提示我们在这个生命周期钩子里,要不返回一个状态对象,要不返回一个null,我们就返回一个状态对象试试:
在这里插入图片描述
在这里插入图片描述
但是,当我们点击+1按钮时候,数值不会改变了:
在这里插入图片描述
相当于只要我们在getDerivedStateFromProps这个生命周期钩子里返回一个写死的状态对象,那么这个状态对象对应的值就永远不会被改变了,那这有什么意义呢?

其实这个钩子可以接收一个props参数:
在这里插入图片描述
然后我们给组件传递一个name props:
在这里插入图片描述
在这里插入图片描述
那如果我们传入的是count:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这个钩子还能接收第二个参数state:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这个钩子使用场景很罕见,了解即可

Guess you like

Origin blog.csdn.net/dyw3390199/article/details/120358216