另外，本教程的代码将全部使用 es6 语法，教程中我会介绍一些用到的 es6 语法，但是不会从头讲解了，推荐阅读es6入门

这里，也可查阅本文档一开始的视频教程。这里我们重点介绍这个项目开发中常用的几个生命周期函数（hook），相信你在接下来的 React 开发中，也会常用这些。

以下声明周期，也没必要每个都写demo来解释，先简单了解一下，后面会根据实际的例子来解释，这样会更加易懂。

getInitialState

初始化组件 state 数据，但是在 es6 的语法中，我们可以使用以下书写方式代替

class Hello extends React.Component {
    constructor(props, context) {
        super(props, context);
        // 初始化组件 state 数据
        this.state = {
            now: Date.now()
        }
    }
}

render

最常用的hook，返回组件要渲染的模板。

comopentDidMount

组件第一次加载时渲染完成的事件，一般在此获取网络数据。实际开始项目开发时，会经常用到。

shouldComponentUpdate

主要用于性能优化，React 的性能优化也是一个很重要的话题，后面一并讲解。

componentDidUpdate

组件更新了之后触发的事件，一般用于清空并更新数据。实际开始项目开发时，会经常用到。

componentWillUnmount

组件在销毁之前触发的事件，一般用户存储一些特殊信息，以及清理setTimeout事件等。

ITPub博客

markdown 使用练习练习

最新文章