React学习笔记四：生命周期

最新推荐文章于 2023-01-05 11:50:30 发布

九段刀客

最新推荐文章于 2023-01-05 11:50:30 发布

阅读量140

点赞数

本文链接：https://blog.csdn.net/weixin_35958891/article/details/112796463

版权

<!DOCTYPE html>
<html lang=">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>react 学习</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      class Hello extends React.Component {
        constructor(props){
          // 初始化props
          super(props);
          // 初始化状态
          this.state = {
            name: "jack",
            age: 30
          }
        }
        componentWillMount(){
          console.log("组件加载前");
        }
        componentDidMount(){
          console.log("组件加载后")
        }
        updateUser =()=>{
          console.log('dddd')
          this.setState({
            name: "Tim",
            age: 32
          })
        }
        shouldComponentUpdate(){
          console.log('数据是否需要更新')
          // 默认是返回true
          return true;
        }
        componentWillUpdate(){
          console.log("数据将要更新")
        }
        componentDidUpdate(){
          console.log("数据已经更新")
        }
        render() {
          console.log("组件加载或者数据更新")
          return (
            <div>
              <h1>Hello {this.props.name}</h1>
              <p>年龄：{this.props.age}</p>
              <p>擅长：JavaScript</p>
              <button onClick={this.updateUser}>更新用户</button>
            </div>
          );
        }
      }

      ReactDOM.render(
        <Hello name="Jack" age="18" />,
        document.getElementById("app")
      );
    </script>
  </body>
</html>