React Hooks

hooks

注：函数组件的每一次渲染或者更新，都是函数重新执行，产生一个新的私有上下文【也就是内部的代码需要重新执行一次】

useState()

• 作用：在函数组件中使用状态，修改状态值，更新视图

  • 参数1：initiaValue(初始值)
  • 参数2：修改初始值的方法

• useState() 自带了性能优化，每一次修改状态值的时候会拿新的值和之前的值做对比【基于 Object. is()】。如果两个值是一样的就不会修改状态，也不会让页面更新【类似于PureComponent中的shouldComponentUpdate】

• 惰性处理：把父组件传递进来的值经过处理作为初始值，只有第一次渲染组件处理这些逻辑，这样就可以将这些逻辑写入useState为函数的参数中，并return出去。
  useState(()=>{ ...写这里... return XXX})

useEffect()

• 作用：在函数组件中使用生命周期函数
  • useEffect(()=>{})；没设置依赖
    在第一次渲染完毕后执行回调函数，等价于componentDidMount，在组件每次更新的时也会执行回调函数，等价于componentDidUpdate
  • useEffect(()=>{},[])；设置了空依赖
    只有第一次渲染完毕后才会执行回调函数，每一次视图更新后，不再执行。类似于componentDidMount
  • useEffect(()=>{},[num,…])；设置一个或多个依赖
    第一次渲染完毕后会执行回调函数。
    当依赖的状态(一个或多个)发生变化，也会执行。
    依赖的状态没有变化,在组件更新的时候，不会执行。

useEffect和useLayoutEffect的区别?

• 在两者的callback回调函数中，都可以获取DOM元素；是因为真实的DOM对象已经创建了，区别是浏览器是否渲染。
  • useEffect 是异步执行的，需要等到浏览器将所有变化渲染后才会被执行，本次更新完成后再开启下一个任务。
  • useLayoutEffect 是同步，简单说是在浏览器将所有变化渲染到屏幕之前执行的。

REF？

• 作用：
  1. 赋值给标签：获取DOM元素
  2. 赋值给类子组件：可以获取子组件实例【基于实例调用子组件中的属性和方法】
  3. 赋值给函数子组件：报错【需要配合React.forwardRef实现REF转发，获取子组件中的某一个DOM元素】
• 方法：
  1. 在类组件和函数组件中都可以通过给dom添加ref={ref=>this.curRef=ref}来获取DOM元素，函数组件没有this，所以在函数组件中需要删除this来使用(在函数组件中不推荐)
  2. 或者使用React.createRef()来获取dom元素
  3. 使用useRef()

     let boxRef = useRef(null)
     console.log(boxRef)
     

useRef()和React.createRef()的区别?

• useRef在每一次组件更新, 再次执行useRef方法的时候，不会创建新的ref对象，获取到的还是第一次创建的ref对象(函数组件推荐使用)
• createRef在每一次组件更新的时候，会创建一个新的ref对象，比较浪费性能(类组件推荐使用)

useImperativeHandle(ref,()=>{]})

• 作用：基于React.forwardRef()实现转发的同时，获取函数子组件内部的状态或方法
  • 在回调函数的里面return出去要被父组件获取的方法和属性

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

• 作用：回调函数执行的时候会返回一个结果，useMemo具备"计算缓存”，在依赖的状态值没有变化、回调函数没有触发执行的时候，这个结果获取的是上一次计算的结果
  • 参数1：回调函数
  • 参数2：依赖

// 示例
import React , { useMemo } from "react";
import PropTypes from "prop-types";

const VoteMain = function VoteMain(props){

  let { supNum,oppNum } = props; // 基于useMemo实现复杂逻辑的计算缓存
  let ratio = useMemo(() => 
    let ratio ='--'
        total = supNum + oppNum;
        if (total > 0) ratio = (supNum / total * 100).toFixed(2) + '%';
    return ratio;
  }，[supNum,oppNum]);

  return <div className="main">
    <p>支持人数: {supNum}人</p>
    <p>反对人数: {oppNum}人</p>
    <p>支持比率: {ratio}</p>
  </div>;
}

* 属性规则校验 */
VoteMain.defaultProps = {
  supNum:0，
  oppNum:0
}
VoteMain.propTypes = {
  supNum:PropTypes.number,
  oppNum:PropTypes.number
}

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

• 作用：回调函数执行的时候会返回一个结果，之后每次组件更新，都判断依赖的状态是否改变。如果改变就重新创建函数，并返回新的返回值。如果没有更新就不会重新创建函数。【简单来说，useCallback可以始终拿到第一次回调函数返回的结果(不要乱用)】
• 常见于：父子组件嵌套，父组件修改状态，并不影响子组件，这个时候子组件没必要更新，这个时候需要将父组件引入的子组件用useCallback包一下，子组件则需要用React.memo()包一下
  • 参数1：回调函数
  • 参数2：依赖

自定义hook

• 自定义hook函数，可以将某些组件逻辑提取到可重用的函数中，建议命名规则useXxx
• 需求：react提供的useState方法不能修改对象，我们根据useState()方法自己封装一个支持修改对象的hook【usePartialState】

const usePartialState = function usePartialState(initiaValue) {
  let [state, setState] = useState(initiaValue);
  const setPartial = function setPartial(partialState) {
    setState({
      ...state,
      ...partialState,
    });
  };
  return [state, setPartial];
};

export default function Hooks() {
  const [state, setPartial] = usePartialState({
    x: 1,
    y: 1,
  });

  const handle = (type) => {
    if (type === "addX") {
      setPartial({
        x: state.x + 1,
      });
      return;
    }
    setPartial({
      y: state.y + 1,
    });
  };

  return (
    <div style={{ border: "1px solid #666", padding: "10px 20px", width: 200 }}>
      <div>
        <p>x:{state.x}</p>
        <p>y:{state.y}</p>
      </div>
      <Button onClick={handle.bind(null, "addX")}>设置x</Button>
      <Button onClick={handle.bind(null, "addY")}>设置y</Button>
    </div>
  );
}