¿A qué se debe prestar atención en el desarrollo normal de React Hooks?

---

1. ¿Preguntas a las que prestar atención?

(1) No llame a Hook en bucles, condiciones o funciones anidadas, siempre debe usar Hook en el nivel superior de las funciones React

Esto se debe a que React necesita usar la secuencia de llamadas para actualizar correctamente el estado correspondiente y llamar a la función de gancho correspondiente. Una vez que se llama a un gancho en un bucle o en una declaración de bifurcación condicional, es fácil causar inconsistencias en la secuencia de llamada, lo que tiene consecuencias impredecibles.

(2) Cuando use useState, use push, pop, splice, etc. para cambiar directamente el hoyo del objeto de matriz

El nuevo valor no se puede obtener cambiando directamente la matriz usando push, y se debe usar el método destructor, pero no habrá tal problema en la clase.

(3) Cuando useState establece el estado, solo tiene efecto por primera vez, y el estado debe actualizarse más tarde, y useEffect debe pasarse

TableDeail es un componente público. En el componente principal que lo llama, cambiamos el valor de las columnas a través de set, pensando que las columnas pasadas a TableDeail son el último valor, por lo que tabColumn también es el último valor cada vez, pero la tabColumn real es el valor original, no se actualizará a medida que se actualicen las columnas:

(4) Hacer buen uso de useCallback

Cuando el componente principal pasa el controlador de eventos al componente secundario, si no tenemos ningún cambio de parámetro, se puede seleccionar useMemo. Pero cada vez que el componente principal representa el componente secundario, se representará una vez incluso si no hay cambios.

(5) No abuses de useContext

Se pueden utilizar herramientas de gestión de estado basadas en el paquete useContext.

2. ¿La relación entre anzuelo y ciclo de vida?

La esencia de un componente de función es una función, sin el concepto de estado, por lo que no hay ciclo de vida, es solo una función de representación.
Pero después de la introducción de Hooks, se vuelve diferente. Permite que los componentes tengan estado sin usar clase, por lo que existe el concepto de ciclo de vida. El llamado ciclo de vida es en realidad useState, useEffect() y useLayoutEffect().

Es decir: los componentes Hooks (componentes de función que usan Hooks) tienen un ciclo de vida, mientras que los componentes de función (componentes de función que no usan Hooks) no tienen ciclo de vida.

La siguiente es la relación correspondiente entre la clase específica y el ciclo de vida de los Hooks:

constructor: el componente de la función no necesita un constructor, y el estado se puede inicializar llamando a useState . si

计算的代价比较昂贵，也可以传一个函数给 useState。
const [num, UpdateNum] = useState(0)

getDerivedStateFromProps: en general, no necesitamos usarlo, podemos actualizar el estado durante el proceso de renderizado para lograr el propósito de getDerivedStateFromProps.

function ScrollView({
     
     row}) {
    
    
  let [isScrollingDown, setIsScrollingDown] = useState(false);
  let [prevRow, setPrevRow] = useState(null);
  if (row !== prevRow) {
    
    
    // Row 自上次渲染以来发生过改变。更新 isScrollingDown。
    setIsScrollingDown(prevRow !== null && row > prevRow);
    setPrevRow(row);
  }
  return `Scrolling down: ${
      
      isScrollingDown}`;
}

React sale inmediatamente del primer renderizado y vuelve a ejecutar el componente con el estado actualizado para evitar perder demasiado rendimiento.

shouldComponentUpdate: puede envolver un componente con React.memo para reducir sus accesorios

比较
const Button = React.memo((props) => {
    
      // 具体的组件});

Nota: **React.memo es equivalente a **`` PureComponent que solo compara accesorios superficialmente. Aquí también puede usar useMemo para optimizar cada nodo.

render: este es el cuerpo del componente de función en sí.
componentDidMount, componentDidUpdate: useLayoutEffect es la misma fase de llamada que ambos. Sin embargo, le recomendamos que use useEffect primero y que solo pruebe useLayoutEffect cuando falle. useEffect puede expresar combinaciones de todos estos.

// componentDidMount
useEffect(()=>{
    
    
  // 需要在 componentDidMount 执行的内容
}, [])
useEffect(() => {
    
     
  // 在 componentDidMount，以及 count 更改时 componentDidUpdate 执行的内容
  document.title = `You clicked ${
      
      count} times`; 
  return () => {
    
    
    // 需要在 count 更改时 componentDidUpdate（先于 document.title = ... 执行，遵守先清理后更新）
    // 以及 componentWillUnmount 执行的内容       
  } // 当函数中 Cleanup 函数会按照在代码中定义的顺序先后执行，与函数本身的特性无关
}, [count]); // 仅在 count 更改时更新

Recuerde que React espera a que el navegador termine de procesar antes de aplazar la llamada, lo que hace que el trabajo adicional sea útil

componentWillUnmount：相当于 useEffect 里面返回的 cleanup 函数
// componentDidMount/componentWillUnmount
useEffect(()=>{
    
    
  // 需要在 componentDidMount 执行的内容
  return function cleanup() {
    
    
    // 需要在 componentWillUnmount 执行的内容      
  }
}, [])

componentDidCatch y getDerivedStateFromError: todavía no hay equivalentes de Hook para estos métodos, pero se agregarán pronto.

componente de clase	Componente de ganchos
constructor	useState
getDerivedStateFromProps	función de actualización en useState
DeberíaActualizarComponente	usar nota
prestar	la función en sí
componenteDidMount	efecto de uso
componenteDidUpdate	efecto de uso
componenteDesmontará	La función devuelta en useEffect
componenteDidCatch	ninguno
getDerivedStateFromError	ninguno

---