如何仅使用一次React useEffect调用加载函数

2020/10/12 10:01 · javascript ·  · 0评论

useEffect阵营钩将运行在功能上传递的每一个变化。可以对其进行优化,使其仅在所需属性更改时调用。

如果我想从中调用初始化函数componentDidMount而不在更改时再次调用该怎么办?假设我要加载一个实体,但是加载功能不需要组件中的任何数据。我们如何使用useEffect钩子做到这一点

class MyComponent extends React.PureComponent {
    componentDidMount() {
        loadDataOnlyOnce();
    }
    render() { ... }
}

使用钩子可能看起来像这样:

function MyComponent() {
    useEffect(() => {
        loadDataOnlyOnce(); // this will fire on every change :(
    }, [...???]);
    return (...);
}


如果只想
useEffect在初始渲染后运行给定的函数,则可以给它一个空数组作为第二个参数。

function MyComponent() {
  useEffect(() => {
    loadDataOnlyOnce();
  }, []);

  return <div> {/* ... */} </div>;
}

TL; DR

useEffect(yourCallback, []) -仅在第一次渲染后才触发回调。

详细说明

useEffect默认情况下,在每次渲染组件后运行(因此会产生效果)。

当放置useEffect到组件中时,您告诉React您想运行回调作为效果。React将在渲染后和执行DOM更新后运行效果。

如果仅传递回调,则该回调将在每次渲染后运行。

如果传递第二个参数(数组),React将在第一个渲染之后以及每次更改数组中的一个元素时运行回调。例如,在放置时useEffect(() => console.log('hello'), [someVar, someOtherVar])-回调将在第一个渲染之后以及对someVarsomeOtherVar中的一个进行更改的任何渲染之后运行

通过向第二个参数传递一个空数组,React将在每次渲染该数组之后进行比较,并且不会看到任何更改,因此仅在第一个渲染之后才调用回调。

useMountEffect挂钩

在组件挂载后仅运行一次功能是一种常见的模式,它证明了自己的钩子隐藏了实现细节。

const useMountEffect = (fun) => useEffect(fun, [])

在任何功能组件中使用它。

function MyComponent() {
    useMountEffect(function) // function will run only once after it has mounted. 
    return <div>...</div>;
}

关于useMountEffect挂钩

useEffect与第二个数组参数一起使用时,React将在挂载(初始渲染)后和数组中的值更改后运行回调。由于我们传递了一个空数组,因此它将仅在安装后运行。

将空数组作为第二个参数传递给useEffect引用docs可以有效地告诉React

这告诉React您的效果不依赖于道具或状态的任何值,因此它不需要重新运行。

这是一个片段,您可以运行以显示它的工作原理:

function App() {
  const [user, setUser] = React.useState(null);

  React.useEffect(() => {
    fetch('https://randomuser.me/api/')
      .then(results => results.json())
      .then(data => {
        setUser(data.results[0]);
      });
  }, []); // Pass empty array to only run once on mount.
  
  return <div>
    {user ? user.name.first : 'Loading...'}
  </div>;
}

ReactDOM.render(<App/>, document.getElementById('app'));
<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="app"></div>

我喜欢定义一个mount函数,它以相同的方式欺骗​​EsLint useMount,我发现它更不言自明。

const mount = () => {
  console.log('mounted')
  // ...

  const unmount = () => {
    console.log('unmounted')
    // ...
  }
  return unmount
}
useEffect(mount, [])

本文地址:http://javascript.askforanswer.com/ruhejinshiyongyicireact-useeffectdiaoyongjiazaihanshu.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!