Recientemente, estaba leyendo la documentación de RectJS y vi que la función useEffect toma otra función como argumento. Ejemplo de la documentación:
useEffect(() => { document.title = `You clicked ${count} times`; });¿Puedo de alguna manera seleccionar la función que llamó después del renderizado? ¿Y está bien hacer esto? Ejemplo, lo que quiero decir:
useEffect(this.state.count % 2 == 1 ? () => { document.title = `You clicked ${count} times (ODD)`; } : () => { document.title = `You clicked ${count} times(EVEN)`; } );Probablemente no sea el mejor ejemplo. Se podría hacer sin función adicional, pero es solo un ejemplo.
PD. Esta es solo una pregunta teórica y no sé si es prácticamente utilizable (o posible). Soy nuevo en Reaccionar. Espero que alguien me explique esto.
Sí, está completamente bien.
De acuerdo con los documentos: use efectos múltiples para separar preocupaciones :
Así como puedes usar el State Hook más de una vez , también puedes usar varios efectos. Esto nos permite separar la lógica no relacionada en diferentes efectos.
React aplicará todos los efectos utilizados por el componente, en el orden en que se especificaron.
En lugar de elegir dinámicamente qué función pasar useEffect , sería mucho más limpio pasar siempre la misma función, y en esa función elegir qué hacer.
Elegir qué hacer podría ser llamar a dos funciones diferentes, o simplemente la configuración del título en sí, eso depende de usted, pero no intentaría hacer su lógica condicional como lo es actualmente.
Ejemplo tanto de su versión como de mi sugerencia:
Como puede ver, son funcionalmente iguales. Pero no veo absolutamente ninguna razón para optar por ExampleA .
const { useState, useEffect } = React; function ExampleA() { const [count, setCount] = useState(0); useEffect(count % 2 == 1 ? () => { console.log(`You clicked ${count} times (ODD)`); } : () => { console.log(`You clicked ${count} times(EVEN)`); } ); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } function ExampleB() { const [count, setCount] = useState(0); function even() { console.log(`You clicked ${count} times (EVEN)`); } function odd() { console.log(`You clicked ${count} times (ODD)`); } useEffect(() => { if (count % 2 == 1) { odd(); } else { even(); } }); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } function App() { return ( <div> <h1>Your option</h1> <ExampleA /> <h1>My Suggestion</h1> <ExampleB /> </div> ); } ReactDOM.render(<App />, document.getElementById('root')); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="root"></div>useEffect tiene dos parámetros, una función y una array de dependencias. Cada vez que cambia cualquiera de los elementos en la matriz de dependencia, se llama a la función como el primer parámetro pasado a useEffect .
Para su ejemplo particular, se puede demostrar de la siguiente manera:
export default function App() { const [count, setCount] = useState(0); useEffect(() => { if (count % 2 === 0) { console.log("COUNT IS EVEN"); } else { console.log("COUNT IS ODD"); } }, [count]); return ( <div className="App"> <h1>Count: {count}</h1> <button onClick={() => setCount((c) => c + 1)}>Increment</button> </div> ); } Observe [count] como el segundo parámetro de useEffect , cada vez que cambia count , nuestra función se ejecuta y registra si el valor de count es impar o par.
Para casos de uso separados, se recomienda separar su lógica en ganchos useEffect separados. Por ejemplo, considere que tiene otro valor para el que desea ejecutar sus efectos secundarios, puede hacerlo creando otro enlace y pasando la matriz de dependencia.
Hay algunos otros matices para useEffect , como lo que sucede si no pasa una matriz de dependencia al enlace o qué sucede si pasa una matriz vacía como dependencia. Te animo a que investigues por tu cuenta.