18

好的,所以:

  useEffect(() => {
    
  }, [props.lang]);

每次使用 props.lang 更改时,我应该在 useEffect 中做什么来重新渲染组件?

4

3 回答 3

23

如 React 文档中所述,将您的 useEffect 视为 、 和 的混合componentDidMountcomponentDidUpdatecomponentWillUnmount

要表现得像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>
  );
}

完整代码:

编辑启发式-rubin-pmdjk

于 2019-09-20T00:50:53.313 回答
5

最简单的方法

添加一个虚拟状态,您可以切换为始终启动重新渲染。

const [rerender, setRerender] = useState(false);

useEffect(()=>{

    ...
    setRerender(!rerender);
}, []);

这将确保重新渲染,因为组件总是在状态更改时重新渲染。

您可以setRerender(!rerender)随时随地调用以启动重新渲染。

于 2021-07-31T01:29:26.740 回答
0
const [state, set] = useState(0);

useEffect(() => {
  fn();
},[state])

function fn() {
  setTimeout((), {
    set(prev => prev + 1)
  }, 3000)
}

fn上面的代码将每 3 秒重新渲染一次函数。

于 2021-03-15T11:30:31.353 回答