Why,Reack Hooks

794 阅读4分钟

类组件和函数组件

类组件: 通过继承React.Component 得来的React组件

import React, { Component } from 'react';

class ClassComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      text: 'Hello React!'
     }
  }

  componentDidMount(){

  }

  render() { 
    const {text} = this.state;
    return ( 
      <div>
        <div>{ text }</div>
      </div>
     );
  }
}
 
export default ClassComponent;

函数组件(无状态组件): 以函数形式存在的React组件,最开始也被叫做无状态组件

export const FunctionComponent = function(props){
  const {text} = props
  return (
    <div>
      <div>{ text }</div>
    </div>
  )
}

类组件和函数组件之间的对比

  • 类组件需要继承React.Component,函数组件不需要
  • 类组件可以使用组件的生命周期,函数组件不可以
  • 类组件中可以使用实例化的this,函数组件不行
  • 类组件可以定义并维护state,函数组件不可以

重新理解类组件和函数组件

类组件

类组件是通过继承而来的,本身就包含很多内置API可以调用,比如state生命周期。所以对应的,类组件相对而言比较重,学习成本也相对高一些。并不适合所有场景都去使用。

函数组件

相对于类组件,函数组件更轻巧,灵活,易于维护。React Hooks的出现,让函数组件可以选择性的实现类组件中拥有的功能,这就使得函数组件在轻巧的同时,更加灵活。

函数组件更符合React框架的设计理念

UI = render(data)

这是React官方给出的公示。一个函数,吃进数据,吐出UI

Hooks的本质

Hooks的本质就是一套能够使函数组件更强大,更灵活的钩子

对于函数式组件来说,Hooks就想是一个工具库,可以自由的进行选择和组装,从而定制出一个最适合的组件

useState:为函数组件引入状态

useState函数返回一个数组,数组的第一项是要定义的state变量,数组的第二项是可以修改该变量的API

useState函数接收一个入参,作为state变量出初始值

import React, { useState } from 'react';

function UseStateComponent(props){
  const [count,setCount] = useState(0)

  return (
    <div>
      <h1>React Hooks useStateDemo</h1>
      <div>当前Count:{ count }</div>
      <button onClick={() => setCount(count + 1)}>Count++</button>
    </div>
  )
}

export default UseStateComponent

useEffect:为函数组件执行副作用操作

函数组件跟类组件最大的区别就在于state和生命周期的缺失,useState为函数组件引入了state,而useEffect则在一定程度上弥补了函数式组件生命周期的不足

可以使用React生命周期来理解useEffect的作用,但是不要将两者划等号。useEffect的作用是为函数式组件引入副作用的钩子

useEffect函数可以接收两个参数,第一个是回调函数,第二个是依赖更新的State数组

useEffect(callBack,[])

1. 每一次渲染后都执行的副作用

传入回调函,不传依赖数组

useEffect(()=>{
  //处理逻辑
})

2. 仅在挂载阶段执行一次的副作用

传入回调函数(该函数的返回值不能是一个函数),且传入一个空数组

useEffect(()=>{
  
},[])

3. 仅在挂载阶段和卸载阶段执行的副作用

传入回调函数,且回调函数返回另一个函数(卸载的时候调用该函数),数组传空

useEffect(()=>{
  return () =>{
    
  }
},[])

4. 根据一定的条件来触发的副作用

传入回调函数,且传入依赖数组,数组不为空。数组中为监听的state属性,当数组中的属性改变的时候,就会触发副作用

useEffect(()=>{
  
},[num1,num2,num3])

总结

  • useEffect一共接收两个参数,第一个是回调函数,第二个是依赖数组
  • 通过回调函数是否返回一个新函数来决定卸载时候会不会执行
  • 通过控制依赖数组传,不传,传空来分别控制重新渲染的时候依赖触发,每次都触发,不触发

React Hooks的优势

1. 告别难以理解的类组件

React类组件的生命周期相对复杂,同时很多不合理的逻辑处理会被加入到生命周期里面

React类组件里面的this指向问题也是一大痛点

2. 更好的逻辑拆分

函数组件相对于类组件,可以做到更好的组件化,以及逻辑的拆分

有了React Hooks的加持,函数式组件将更加强大和灵活

3. 函数式组件更符合React的定位

UI = render(data)