React 的方方面面（未完待续……）

概述

React.Component 是一个抽象类，所以你很难直接用它，都是写一个子类去继承它，并在子类中定义一个 render() 渲染方法。

class Greeting extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}</h1>
    }
}

组件生命周期

每个组件都有自己的生命周期函数，你可以重写它。以 will 开头的函数表示在一些事情发生之前这个函数会被触发，did 开头的表示一些事情已经发生了。

加载

当一个组件实例被创建并且插入到 DOM 中时这些方法会被调用

constructor()
componentWillMount()
render()
componentDidMount()

更新

由于 props 和 state 的变化导致组件需要更新重新渲染，这些方法会被调用

componentWillReceiveProps(nextProps)
shouldComponentUpdate(nextProps, nextState)
componentWillUpdate(nextProps, nextState)
render()
componentDidUpdate(prevProps, prevState)

卸载

当一个组件被从 DOM 中移除时这个方法会被调用

componentWillUnmount()

其他 API

每一个组件还会提供一些 API

setState()
forceUpdate()

类的属性

defaultProps
displayName

示例属性

props
state

详解

render()

render() 方法是必须的。 当它被调用时，它会检查 this.props 和 this.state 然后返回单个 React 元素。这个元素就相当于一个原生的 DOM 节点，例如 <div />，或者其他你定义的节点。 当然如果你不想渲染任何东西的话你可以 返回（return）null 或 false。 另外 render() 方法应当是一个纯方法，这意味着你不要在里面修改 state，它每一次被调用都应该返回一致的结果，如果你有让组件与浏览器有交互的需求，应当在生命周期函数中实现，让 render() 函数足够干净会让你省心很多。 注意一个情况就是，render() 方法在 shouldComponentUpdate() 返回（return）false 的时候不会被触发

constructor()

未完待续……

转载于:https://my.oschina.net/u/3117745/blog/1524498