05月01, 2018

React学习之旅 (04) -- state 和 生命周期

state在React中非常重要

做一个点击按钮增加数字的小例子:

class AddNum extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            num: 0
        };
    }
    fnClick (){
        let num = this.state.num;

        // 注意,不要用 num++
        this.setState({
            num: num + 1
        });
    };
    render() {
        return (<div>
            <h2>{this.state.num}</h2>
            <button onClick={this.fnClick.bind(this)}>点击增加</button>
        </div>)
    }
};

ReactDOM.render(<AddNum />, 
document.getElementById('root'));

生命周期函数:

  1. componentWillMount --> 组件挂载前
  2. componentDidMount --> 组件挂载后
  3. componentWillUpdate --> 组件更新前
  4. componentDidUpdate --> 组件更新后
  5. componentWillUnmount --> 组件卸载

本文链接:http://www.laijianlou.top/post/react-04.html

-- EOF --

Comments