React 事件以及组件 ( 生命周期钩子函数 初始化,运行中,销毁,错误 )

原生js — 事件

1. 事件概念

2. 构成

   1. 谁触发: DOM
   2. 事件触发的形式： on addEventListener
   3. 事件类型: click keyup keydown
   4. 事件处理程序
   5. 事件对象
   6. 事件传参

     var box = doucment.querySelector( 'div' )
   
     box.onclick = function(){
       //事件处理程序
     }
   

React – 事件

1. 写法一共四种，我们推荐有两种

   1. 箭头函数

      class App extends React.component{
        change = () => {}
      }
   

   2. 在constructor函数中bind this

     class App extends React.component{
       constructor () {
         super()
   
         this.change = this.change.bind( this )
       }
       change () {
         this.setStatge({})
       }
     }
   

2. 事件对象 e

   • React中的事件对象不是浏览器提供的， 而是内部自己构建的
   • React的事件对象的中除了方法以外，其他值都是null，但是使用方式和浏览器中事件对象一致，也可以直接使用

3. 事件参数

   1. 形式参数
   2. 实际参数

注意：
1. React中如果直接在实例方法后面跟（） ， 那么实例方法就会自动运行
2. 实际参数的传递需要使用bind 绑定
javascript <div> { this.change.bind( this, arg1, arg2 ) } </div>

• 在render里调用方法的地方外面包一层箭头函数
• 在render里通过this.handleEvent.bind(this, 参数)这样的方式来传递
• 通过event传递
• 比较推荐的是做一个子组件, 在父组件中定义方法，通过props传递到子组件中，然后在子组件件通过this.props.method来调用

4. 补充： label

   举例：
   以下那几项是您的兴趣爱好？
   篮球 【】

• label使用
  1. 和 表单元素 绑定 ， 执行一定效果，比如上面的案例
  2. 修改表单元素的默认样式,代替表单元素

5. 生命周期

• 初始化阶段

  • constructor

    • 在组件挂载之前执行，调用super(props),用来将父组件传来的props绑定到这个类中，使用this.props将会得到。
    • 定义状态
      • 状态初始化也可以有父组件传递过来的属性来进行赋值

  • static getDerivedStateFromProps ( Props,State ) {}

    • 在组件实例化后，和接受新的props后被调用。他必须返回一个对象来更新状态，或者返回null表示新的props不需要任何state的更新。

  • componentWillMount () {} 组件即将挂载

    • 数据请求
    • 将请求来的数据赋值给当前组件的状态

  -render 函数
  - 当他被调用时，他将计算this.props和this.state，返回一个类型

  -componentDidMount
  - 组件装载结束，将VDOM 渲染成了真实DOM
  - 操作真实DOM( 第三方实例化 )
  - 数据请求 （ 阿里用 ）

• 更新阶段

  1. static getDerivedStateFromProps ( Props,State )
  • 这个钩子函数需要有返回值
  • 第一个参数是新的属性值
  • 第二个参数之前的状态
  2. componentWillReceiveProps ( nextProps )
  • 这个钩子函数当自身的属性更改时触发
  • 有一个参数,参数是新的属性值
  3. shouldComponentUpdate ( nextstate,nextprops )
  • 这个钩子函数返回的是true和false
  • 当组件的状态发生改变的时候是否需要进行视图的重新渲染,true会重新渲染,false不会
  4. getSnapshotBeforeUpdate ()
  • 这个钩子需要有返回值
  • 配合componentDidUpdate()使用
  5. componentWillUpdate ()
  • 这个钩子函数表示组件即将更新
  • 不能再这个钩子函数中更新组件中的状态和属性,不然会死循环
  6. componentDidUpdate( prevProps,prevState,snapshot )
  • 这个钩子函数是执行更新渲染真实DOM
  • 第一个参数prevProps 是之前的Props值
  • 第二个参数prevState 是之前的State值
  • 第三个值snapshot 是getSnapshotBeforeUpdate() 的返回值

• 销毁阶段

  1. componentWillUnmount ()
  • 这个钩子函数是在组件销毁时触发,组件的销毁可以通过 Component || flag(布尔值) 或者三元表示 来判断是否渲染进行销毁
  • 一般用来做一些善后的工作( 清除第三方实例,清除计时器 )

生命周期第四个阶段 – 错误处理( 在react16版本中引入 )

作用

当渲染出现问题时,可以捕获错误,页面不会出现报错信息
案例代码

    import React from 'react'

    class Error extends React.Component {   
      constructor(props) {     
        super(props);     
        this.state = { error: false };
      }
      componentDidCatch(error, info) {    
        console.log('错误处理-componentDidCatch') 
        this.setState({ error, info });
      }

      errorHandle = () => {
        this.setState({
          error: true
        })
      }

      render() {
        if (this.state.error) {
          return (
            <div>
              <p> 报错了 </p>
              {
                console.log(new Error("YOLO"))
              }
            </div>
          )
        }
        return (
          <div>
            <button onClick = { this.errorHandle }>
              抛出错误
            </button>
          </div>
        );   
      } 
    }

    export default Error

注意：
static getDerivedStateFromProps vs componentWillMount

1. 他们功能是一致的，但是 前一个是未来版本使用， 后一个 未来版本将会被淘汰，但是现低版本用的都是它