理解React生命周期的好例子

Posted 2020-09-19

        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看，自己琢磨。