React的生命周期（旧）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React生命周期（旧）</title>
</head>

<body>
    <div id="test"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
        class Count extends React.Component {
    
    
            state={
    
    
                count:0
            }
            //是否允许组件状态改变
            //这个函数如果自己不调，react会自动调用，并且永远返回一个值true
            shouldComponentUpdate(){
    
    
                console.log('count-----shouldComponentUpdate')
                return false
            }
            
            force = ()=>{
    
    
                //强制更新，不走shouldComponentUpdate这一步，直接更新
                this.forceUpdate()
            }
            //组件的状态改变之前
            componentWillUpdate(){
    
    
                console.log('count-----componentWillUpdate')
            }
            //组件状态改变之后
            componentDidUpdate(){
    
    
                console.log('count-----componentDidUpdate')
            }

            //构造函数
            constructor(props){
    
    
                console.log('count-----constructor')
                super(props)
            }
            //组件挂载之前
            componentWillMount(){
    
    
                console.log('count-----componentWillMount')
            }
            //组件挂载之后
            componentDidMount(){
    
    
                console.log('count-----componentDidMount')
            }

            //组件卸载之前
            componentWillUnmount(){
    
    
                console.log('count-----componentWillUnmount')
            }
            //卸载组件的回调
            death = ()=>{
    
    
                console.log('count-----unmountComponentAtNode')
                ReactDOM.unmountComponentAtNode(document.getElementById('test'))
            }
            //组件渲染
           render(){
    
    
            console.log('count-----render')
            return (
                <div>
                    <h2>当前求和为：{
    
    this.state.count}</h2>
                    <button onClick={
    
    this.add}>点我+1</button>
                    <button onClick={
    
    this.death}>点我卸载组件</button>
                    <button onClick={
    
    this.force}>点我强制更新</button>
                </div>
            )
           }
           add = ()=>{
    
    
            let {
    
    count} = this.state
            this.setState ({
    
    count:count+1})
           }
        }
        ReactDOM.render(<Count />, document.getElementById('test'))
    </script>
</body>

</html>
React的生命周期（旧）

猜你喜欢
