使用效果重新渲染太多次

Question

我有一个组件，它需要获取数据，将其设置为state，然后将其传递给子级。一些数据还需要在上下文中设置。我的问题是，使用useEffect，一旦调用API，它将为我需要执行的每个setvalue（）函数重新呈现。我已经尝试传递useffect一个空的[]数组，由于状态正在改变，仍然得到相同数量的重新渲染。此时数组包含集合。。。用于防止eslint抛出警告的函数。

有没有更好的方法来避免如此多的重新渲染？

const Home = (props) => {

  console.log("TCL: Home -> props", props);
  const classes = useStyles();
  const [value, setValue] = React.useState(0);


  //CONTEXT
  const { listSavedJobs, setListSavedJobs, setIsFullView} = useContext(HomeContext);
  const {
    setUserName,
    setUserLastName,
    setUserEmail,
    setAvatarProfile,
  } = useContext(UserContext);

  // STATE
  const [searchSettings, setSearchSettings] = useState([]);
  const [oppData, setOppData] = useState([]);
  const handleChange = (event, newValue) => {
    setValue(newValue);
  };


  const handleChangeIndex = index => {
    setValue(index);
  };


  //API CALLS
  useEffect(() => {
    const triggerAPI = async () => {

      setIsFullView(false);

      const oppResponse = await API.getOpportunity();
      if(oppResponse){
        setOppData(oppResponse.response);
      }
      const profileResponse = await API.getUserProfile();
      if(profileResponse){
        setUserName(profileResponse.response.first_name);
        setUserLastName(profileResponse.response.last_name);
        setUserEmail(profileResponse.response.emailId);
      }
      const profileExtData = await API.getUserProfileExt();
      if(profileExtData){
        setAvatarProfile(profileExtData.response.avatar);
        setListSavedJobs(profileExtData.response.savedJobs);
        setSearchSettings(profileExtData.response.preferredIndustry);
      }
    };
    triggerAPI();

  }, [ 
    setOppData,
    setUserName,
    setUserLastName,
    setUserEmail,
    setAvatarProfile,
    setListSavedJobs,
    setIsFullView,
  ]);

...```

Answer 1

仅在挂载和卸载时运行

您可以传递空数组的特殊值[]，表示“仅在装载和卸载时运行”。因此，如果我们将上面的组件更改为调用useffect，如下所示：

useEffect(() => {
  console.log('mounted');
  return () => console.log('unmounting...');
}, [])

然后，它将在初始渲染后打印“挂载”，在整个生命周期内保持沉默，并在退出时打印“卸载…”。

防止useEffect运行每个渲染

如果您希望效果运行的频率降低，您可以提供第二个参数——值数组。把它们看作是这种效果的依赖关系。如果其中一个依赖项自上次以来发生了更改，则效果将再次运行。（它也将在初始渲染后运行）

const [value, setValue] = useState('initial');

useEffect(() => {
  // This effect uses the `value` variable,
  // so it "depends on" `value`.
  console.log(value);
}, [value])

如需了解更多信息，请使用效果

Answer 2

只将空数组传递给useffect的第二个参数。

注意事项

React保证setState函数标识是稳定的，并且在重新渲染时不会更改。这就是为什么从useEffect或useCallback依赖项列表中省略是安全的。来源

编辑：尝试此操作以避免重新加载。慎用