理解React生命周期的好例子

        class App extends React.Component {
            static propTypes = {

            };
            static defaultProps = {

            };
            constructor(props) {
                super(props);
                this.state = {
                    data: 0
                };
            }

            componentWillUnMount() {

            }

            componentWillReceiveProps(nextProps) {

            }

            shouldComponentUpdate(nextProps, nextState) {
                return true;
            }

            componentWillUpdate(nextProps, nextState) {
                console.log('准备update')
                console.log(this.state.data)
            }

            componentDidUpdate(prevProps, prevState) {
                console.log(this.state.data)
            }

            componentWillMount() {
                console.log(this.state.data)
            }

            componentDidMount() {
                console.log(this.state.data)
                this.setState(
                    {data: 1}
                )
                console.log(this.state.data)

            }

            render() {
                return <div>This is a demo</div>;
            }
        }

        ReactDOM.render(
            <App />,
            document.getElementById('example')
        )

  《深入React技术栈》这本书确实值得推荐。对生命周期的理解,就是自己慢慢打log看,自己琢磨。

上一篇:Maven学习总结(16)——深入理解maven生命周期和插件


下一篇:深入源码理解SpringBean生命周期