如何在功能组件中使用componentWillReceiveProps

Question

在花了大量时间研究类组件之后，我对功能组件还是个新手。在尝试一些东西的时候，我遇到了一些问题。如何在useEffect钩子的上下文中使用componentWillReceiveProps，

componentWillReceiveProps(nextProps) {
if (_.isEmpty(nextProps.user)) {
this.props.history.push("/signin");
}
this.setState({
selImg: nextProps.meetingData.themeImage,
});
}

Answer 1

• 将更改路由的副作用包裹在useEffect()中，并使其依赖于user，因此每当user发生变化时它都会发生反应。您还需要将history作为依赖项，但它不会更改。

• 将meetingData.themeImage分配给const或直接使用它，因为如果组件发生变化，无论如何都会渲染。

  const Example = ({ user, history, meetingData }) => {
  useEffect(() => {
  if (_.isEmpty(user)) {
  history.push("/signin");
  }  
  }, [user, history]);
  const selImg = meetingData.themeImage;
  return (
  // JSX
  );
  }
  

Answer 2

这可能相当于useEffect在功能组件中的依赖:

useEffect(() => {
if (_.isEmpty(props.user)) {
props.history.push("/signin");
}
setState({
selImg: props.meetingData.themeImage,
});
}, [props.user]);

Answer 3

下面是您的代码的功能实现。

可以用useState代替setState，可以用useEffect代替componentWillReceiveProps来监听变量的更新。
注意useEffect的第二个参数，依赖性数组。在那里你可以选择什么更新将触发useEffect的第一个变量(即回调)。

function FunctionalImplementation({ user, history, meetingData }) {
// The functional equivalent of `this.state = { selImg: null }`
const [selImg, setSelImg] = useState(null);

useEffect(() => {
if (_.isEmpty(user)) {
history.push("/signin");
}

// You might want to put this inside an `else` block, just to be more clear
setSelImg(meetingData.themeImage);
// If you want to update `selImg` when `props.meetingData` changes too,
// add it to useEffect's dependencies array
}, [user, history]);
}