一个组件会经历很多状态，在其生命周期中，第一个状态称为 mounting 状态，这是组件被实例化并创建到 DOM 中，这里有一些可以加入组件的特殊方法， react 会自动地调用这些方法。我们叫这些方法为生命周期钩子，它们允许我们勾住整个生命周期中的某个特定的时刻，并且做一些事情。
在mounting状态中有3个生命周期钩子：constructor、render 和 componentDidMount，react会顺序调用这些方法。
第二个状态是update状态，这个状态在 state 或者组建的 props 改变的时候发生。在这个状态中，有两个生命周期钩子，render 和 componentDidUpdate，所以无论何时我们改变组件的 state，或者窜入一个新的 props，这两个方法都会依次被调用。
最后一个状态是 unmounting 状态，这个状态在当一个组件被从DOM中移出时被触发。
life.png
这些生命周期钩子在实际中有什么用处呢？
装载阶段
class App extends Component {
state = {
counters: [
{ id: 1,value: 4 },
{ id: 2,value: 0 },
{ id: 3,value: 0 },
{ id: 4,value: 0 }
]
}
constructor() {
super();
console.log('App - Constructor');
}
......
}
我们在App类中添加了一个构造器，因为我们添加了构造器，我需要通过使用 super 方法调用父级的构造器。
这个构造器只会调用一次，即当一个类的实例创建的时候。这是一个给属性赋值的好机会，例如比较常见的，就是从 props 获取数据并装在 state 中。例如我们可以设置 this.state 为 this.props 的某些东西。在构造器中，我们直接设置 state ，我们不会调用 setState 方法，因为这个方法只能在组件被创建并插入到 DOM 中之后才能调用。所以，如果需要直接设置 state ，可以在构造器中实现。
constructor() {
super();
console.log('App - Constructor');
this.state = this.props.something;
}
我们不能在这里直接访问 this.props，除非我们把 props 作为参数，传到构造器里，同时也传入到它的父类中。否则，props 会返回为定义。
所以，正确的代码应该是：
constructor(props) {
super(props);
console.log('App - Constructor');
this.state = this.props.something;
}
因为构造函数只调用一次，所以这是设置属性的最佳时机。
我们来看看下一个函数 componentDidMount ，这个钩子在组件被加入 DOM 之后调用。这是使用 Ajax 与服务器通信的好时机。
所以在这个函数里面，我们可以进行一个 Ajax 的请求，然后，使用 setState 传入新的数据。
componentDidMount() {
//Ajax Call
//this.setState({ movies })
}
第三个装载阶段的钩子是 render。
回到浏览器中，我们可以观察到以下调用顺序：
order.png
当组件加载完成，意味着组件已经存在于 DOM 中了。
还有一个我们需要了解的事，是 render 方法，一旦渲染完成，也就意味着它的所有子组件都渲染完成了，我们来实践一下：
render() {
console.log('App - Rendered');
return (
<React.Fragment>
<NavBar totalCounters={this.state.counters.filter(c => c.value > 0).length}/>
<main className="container">
<Counters
counters={this.state.counters}
onReset={this.handleReset}
onIncrement={this.handleIncrement}
onDelete={this.handleDelete}
/>
</main>
</React.Fragment>
);
}
我们可以看到，在 App 组件中，有一个 NavBar 组件，还有一个 Counters 组件。
NavBar 组件是一个无状态功能性组件。在函数体中，在返回声明之前，我们打印一下NavBar 已经渲染的信息。
有一个值得注意的事是，我们不能在无状态功能性组件中使用生命周期钩子，因为这里只有一个简单的返回函数，输出这个组件。如果要使用钩子，我们只能使用类组件。
const NavBar = ({ totalCounters }) => {
console.log('NavBar - Rendered');
return (
<nav className="navbar navbar-light bg-light">
<a className="navbar-brand" href="#">
Navbar{" "}
<span className="badge badge-pill badge-secondary">
{totalCounters}
</span>
</a>
</nav>);
};
接下来，我们依次在 counters 和 counter 组件中打印相关信息。
回到浏览器，我们可以看到如下调用顺序：
order2.png
这就是装载阶段。
更新阶段：
这个阶段在组件的 state 或者 props 改变的时候发生。
作为例子，我们来看一下增加按钮：
在App组件的 handleIncrement 方法中，我们更新了组件的 state
handleIncrement = counter => {
const counters = [...this.state.counters];
const index = counters.indexOf(counter);
counters[index] = {...counter};
counters[index].value++;
this.setState({ counters })
}
那么，这会触发对渲染器的调用，也就是组价和它的子组件，同时都会重新渲染。
回到浏览器中，我们清空 console,然后点击一下增加按钮，可以看到，我们的整个组件数都重新渲染了。
render.png
需要注意的是，这里所说的整个组件库重新渲染，不意味着，整个 DOM 都更新了。当组件被渲染的时候实际上是得到了一个 react 元素，这个元素更新了虚拟DOM，react 会拿新的虚拟DOM 和旧的虚拟DOM进行比较，这就是为何 react 不是直接更新页面，而是在内存中比较两个对象。内存中有新旧两个虚拟DOM，react 会意识到什么部分修改了，然后再有针对性的更新真实DOM.
我们在counter中新增一个生命周期函数componentDidUpdate，这个方法在组价被更新之后调用，也就是说有新的 state 或者 props 变化时。我们可以将新的 state 或者 props 与旧的比较，如果有变化，我们可以重新通过Ajax来向服务器取得数据。如果没有变化，也许就不用消耗一个Ajax访问的资源。这是进阶的技巧。
componentDidUpdate(prevProps, prevState) {
console.log('prevProps',prevProps);
console.log('prevState',prevState);
if(prevProps.counter.value != this.props.counter.value) {
// Ajax call and get new data from the server
}
}
所以，我们可以这样，如果旧的 props 的 counters 的 value 的值，与现在的 props 的 counter 对象的 value 值不同，也许我们可以进行一个新的Ajax请求，从服务器获取数据。但是，如果value并没有变化，就不用向服务器再次请求了。
也许这段代码在这个购物车例子里好像没有意义，但是，使用这个钩子函数componentDidUpdate，我们可以决定何时进行 Ajax 请求。去获取针对新的 props 和 state 做出的改变。
卸载阶段
这个阶段只有一个钩子componentWillUnmount，这个方法只在一个组件从DOM卸载的时候调用。如果你设置了计时器或者监听器，可以在组件移除之前做一些清除工作。同时可以做一些内存优化。
delete.png
网友评论