摘要：组件加载当组件被实例化并且插入时所执行的方法，也会按照下的顺序依次执行。示例方法是在组件加载完后立即执行，也就是当该组件相关的节点插入到树中时。该方法在组件生命中只执行一次。注意一些监听需要在组件卸载时清理掉，否则会引起异常。
组件加载
当组件被实例化并且插入Dom时所执行的方法，也会按照下的顺序依次执行。
constructor()
构造方法。
这个方法有两个目的：
初始化一个本地state。
this.state = {color: "red"};
要避免将props参数直接赋值给state, this.state = {color: props.color}是不允许 的
绑定方法。
我们知道React Class中是不会继承this的，如果在class的方法中使用this，那么我们需要将this绑定到方法中。
this.clickHandler = this.clickHandler.bind(this);
绑定this，将需要super(props),否则会提示找不到this.
示例：
constructor(props) {
super(props);
this.state = {color: "red"};
this.clickHandler = this.clickHandler.bind(this);
}
static getDerivedStateFromProps()
当本地state需要根据props来改变的时候可调用此方法。
这个方法是在render()前会被执行，只要执行render()都会被在之前被触发。
该方法有两个参数props和state; 返回值为state对象, 不需要返回整体state，把需要改变的state返回即可。
示例：
static getDerivedStateFromProps(props, state) {
if(props.color !== state.color) {
return {color: props.color};
}
}
render()
这个方法是React组件中必须要提供的方法。当state或者props任一数据有更新时都会执行。
需要注意当继承PureComponent时，不会对对象进行深度比较，也就是，不会根据对象内的对象变化时执行render().
render()是一个纯函数，也就是不能在这个方法中有类似setState()这样的行为。
返回的数据类型可以有：
null、String、Number、Array、Boolean。
React elements
Fragment
Portal
注意：不能返回undefined.
当shouldComponentUpdate()返回false时，无论state和props有没有变化，这个方法都不执行。
示例：
render() {
return (
{this.state.color}
);
}
componentDidMount()
componentDidMount()方法是在组件加载完后立即执行，也就是当该组件相关的dom节点插入到dom树中时。该方法在组件生命中只执行一次。
一般情况，我们会在这里setState()根据props的值，也可以从这里调用接口，获取服务端的数据，也可以在这里监听websocket、setInterval等操作。
注意：一些监听需要在组件卸载时清理掉，否则会引起异常。
示例：
componentDidMount() {
this.setState({color: this.props.color});
}
在线示例
推荐阅读《React 手稿》
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/99059.html
摘要：示例此方法有两个参数返回值为或者默认返回主要使用它来控制组件要不要渲然，常用作性能优化。只能捕获组件树的异常，无法捕获这个方法内的异常。 组件更新 static getDerivedStateFromProps() 当本地state需要根据props来改变的时候可调用此方法。 这个方法是在render()前会被执行，只要执行render()都会被在之前被触发。 该方法有两个参数pr...
摘要：创建组件创建组件之前要注意以下几点组件创建的名称首字母得大写组件中返回的只能是一个根节点，所有的内容得用一个元素都框起来无状态函数式组件无状态函数式组件可以理解成就是一个函数生成的，使得代码的可读性更好，并且精简便利，减少了冗余，无状态组件 创建组件 创建组件之前要注意以下几点： 组件创建的名称首字母得大写 组件中返回的JSX只能是一个根节点，所有的内容得用一个元素都框起来 1.无...
摘要：本文主要介绍之后的生命周期。该方法有两个参数和返回值为对象不需要返回整体，把需要改变的返回即可。必须有一个返回值，返回的数据类型可以有。此生命周期主要用于优化性能。最后，说明一点这三个生命周期在未来版本中会被废弃。 React16.3.0开始，生命周期进行了一些变化。本文主要介绍React16.3.0之后的生命周期。 React16.3.0之前生命周期: 16版本之前的react组件的...
摘要：组件生命周期此文章适合之前的版本，，添加了一些新的生命周期函数，同时准备废弃一些会造成困扰的生命周期函数。每个生命周期阶段调用的钩子函数会略有不同。 React组件生命周期 此文章适合 React@17 之前的版本，React@16.3.0，添加了一些新的生命周期函数，同时准备废弃一些会造成困扰的生命周期函数。所有如果在React@17 发布之前，这篇文章还是适用的。新的生命周期请看官...
摘要：卸载阶段组件卸载和销毁老版生命周期之前的生命周期初始化阶段涉及个钩子函数这些方法会在组件初始化的时候被调用，只跟实例的创建有关。 前言：React 的版本从 v15 到 v16.3 ，再到v16.4，现在最新的版本是 v16.8了。其中最大的变化可能是React Hooks的加入，而最令人困惑的却是它的生命周期，新旧生命周期函数混杂在一起，难免会让许多新来者有很多困惑。所以这一篇我们来...
阅读 3432·2023-04-25 22:45
阅读 1258·2021-11-11 16:54
阅读 2772·2019-08-30 15:44
阅读 3170·2019-08-30 15:44
阅读 1624·2019-08-30 13:55
阅读 925·2019-08-29 18:45
阅读 1171·2019-08-29 17:25
阅读 990·2019-08-29 12:59
