Javascript 如何更换部件将使用挂钩接收道具

我想知道如何使用useEffect-like组件来接收道具

我正在react应用程序中使用redux

因此，当状态更新时，我有一个redux状态，我不想在我的组件中执行一些函数。当我使用类组件时，我是这样做的：

componentWillReceiveProps(nextProps) {
   if (nextProps.Reducer.complete !== this.props.Reducer.complete) {
     someFunc();
   }
}

现在我只使用功能组件和挂钩

现在我的组件是这样的：我试图用这种方式来做，但不起作用。知道我哪里弄错了吗

function Component(props) {
  const Reducer = useSelector(state => state.Reducer);

  const someFunc = () => {
     .....
  }

  useEffect(() => {
    someFunc();
  }, [Reducer.complete]);

}

export default Component;

---

相当于旧

组件willreceive

道具的react钩子可以使用

useffect

钩子来完成，只需指定我们想要侦听的道具，以查看依赖项数组中的更改。 试试这个：

useEffect( () => {
     someFunc()
}, [props.something, someFunc])

---

好的，我假设

Reducer

现在是一个对象，并且有一个

complete键

。 尝试在

useffect

中创建条件

useEffect(() => {
  if (Reducer.complete) {
    runThisFunction()
  }
}, [Reducer.complete, runThisFuntion])

---

由于

someFunc

是效果的依赖项，并且每次渲染

Component

时都会创建

someFunc

，因此每次都会调用效果，因为您正确添加了依赖项，或者因为您没有添加依赖项，或者您已经使用eslint和详尽的DEP和您的开发环境将警告您，您的效果缺少依赖项

要防止在每次渲染时重新创建

someFunc

，可以使用

useCallback

：

function Component(props) {
  const Reducer = useSelector(state => state.Reducer);

  const someFunc = useCallback(() => {
    //  .....
  }, []);

  useEffect(() => {
    someFunc(Reducer.complete); //should use the dep
  }, [Reducer.complete, someFunc]);
}

如果在

someFunc

的主体中使用在

Component

中创建的道具或值，则将

[]

作为依赖项传递将不起作用，您可以使用来帮助您

下面是一个作用于变化值的工作示例：

const{
使用回调，
useState，
使用效果，
}=反应；
函数组件（）{
const[complete，setComplete]=React.useState（false）；
const[message，setMessage]=React.useState(
`complete是${complete}`
);
const completeChanged=useCallback（complete=>{
console.log(
'运行效果，设置消息：'，
完成
);
setMessage（`complete是${complete}`）；
}, []);
const toggleComplete=useCallback(
（）=>setComplete（c=>！c），
[]
);
useffect（（）=>{
completeChanged（complete）；//应该使用dep
}，[complete，completeChanged，setMessage]）；
console.log（'呈现：'，完成）；
返回(
切换完成
{message}
);
}
//渲染应用程序
ReactDOM.render(
,
document.getElementById（'root'））
);

在OP的代码中，他在
组件中定义了
someFunc
，因此在没有
useCallback
的依赖项中添加它将在每个渲染上运行，即使complete没有更改。我们是否应该始终使用
useCallback
包装函数@HMRIn在这种情况下，它是有意义的，因为您只希望在完全更改时运行效果，而不是在函数更改和函数更改每个渲染时运行效果。最好在传递一个用作事件处理程序的函数（如onClick）时也使用它，这样可以防止对不必要的重新呈现DOM元素做出反应。您可以阅读中的注释，了解有关如果执行
prop={new=>reference}
或
prop={{{new:'reference}操作将发生什么的更详细解释
缺少依赖项
someFunc
，但由于它是在
组件中创建的，如果不使用
useCallback创建
someFunc
，它将在每个渲染中运行效果