Думайте о вашем useEffect как о сочетании componentDidMount, componentDidUpdate и componentWillUnmount, как указано в документации React.
Чтобы вести себя как componentDidMount, вам необходимо установить свой useEffect следующим образом:
useEffect(() => console.log('mounted'), []);
Первый аргумент - это обратный вызов, который будет запущен на основе второго аргумента, который является массивом значений.Если какое-либо из значений в этом втором аргументе изменится, будет вызвана функция обратного вызова, которую вы определили внутри вашего useEffect.
В примере, который я показываю, я передаю пустой массив в качестве второго аргумента, и он никогда не изменится, поэтому функция обратного вызова будет вызываться один раз при монтировании компонента.
Этот тип суммирует useEffect.Если вместо пустого значения у вас есть аргумент, как в вашем случае:
useEffect(() => {
}, [props.lang]);
Это означает, что каждый раз, когда изменяется "props.lang", будет вызываться ваша функция обратного вызова.UseEffect не будет перерисовывать ваш компонент в действительности, если вы не управляете каким-либо состоянием внутри этой функции обратного вызова, которое может вызвать повторную визуализацию.
ОБНОВЛЕНИЕ:
Если вы хотите запустить повторную визуализациюрендер, ваша функция рендеринга должна иметь состояние, которое вы обновляете в вашем useEffect.
Например, здесь функция рендеринга начинается с показа английского языка как языка по умолчанию, и в моем эффекте использования я меняю этот языкчерез 3 секунды, так что рендер рендерится и начнет показывать «испанский».
function App() {
const [lang, setLang] = useState("english");
useEffect(() => {
setTimeout(() => {
setLang("spanish");
}, 3000);
}, []);
return (
<div className="App">
<h1>Lang:</h1>
<p>{lang}</p>
</div>
);
}
Полный код:
