在React中组件的props改变时更新组件的有哪些方法 ？
在 React 中，当组件的 props 改变时，React 会自动重新渲染该组件。但是，有时候我们可能需要在 props 改变时执行一些额外的操作，或者优化不必要的重新渲染。这时候我们可以使用以下的生命周期方法或 Hook：
- componentDidUpdate(prevProps, prevState, snapshot)：这是一个生命周期方法，当组件更新完成后会被调用。我们可以在这个方法中比较新旧 props，如果 props 发生了改变，就执行一些额外的操作。
componentDidUpdate(prevProps) {
if (this.props.value !== prevProps.value) {
// props 发生了改变，执行一些操作
}
}
- shouldComponentUpdate(nextProps, nextState)：这也是一个生命周期方法，当组件接收到新的 props 或 state 时会被调用。我们可以在这个方法中比较新旧 props，如果 props 没有发生改变，就返回 false 阻止不必要的重新渲染。
shouldComponentUpdate(nextProps) {
// 如果 props 没有改变，返回 false 阻止重新渲染
return this.props.value !== nextProps.value;
}
- getDerivedStateFromProps(nextProps, prevState)：这是一个静态的生命周期方法，当组件接收到新的 props 或 state 时也会被调用。我们可以在这个方法中根据新的 props 更新 state。
static getDerivedStateFromProps(nextProps, prevState) {
// 根据新的 props 更新 state
if (nextProps.value !== prevState.value) {
return { value: nextProps.value };
}
return ;
}
- React.memo：这是一个高阶组件，用于优化函数组件的重新渲染。我们可以将函数组件包装在
React.memo中，这样只有当 props 改变时，组件才会重新渲染。
const MyComponent = React.memo(function MyComponent(props) {
// render your component
});
- useEffect：这是一个 Hook，用于在函数组件中添加副作用。我们可以在
useEffect的依赖数组中添加 props，这样只有当这些 props 改变时，副作用才会执行。
useEffect(() => {
// 执行一些操作
}, [props.value]); // 当 props.value 改变时，重新执行副作用
###78、简述React中怎么检验props？验证props的⽬的是什么 ？
在React中，我们可以使用PropTypes来对props进行类型检查。PropTypes提供一系列验证器，可以确保我们接收到的数据符合期望的格式。如果传入的props类型不符合预期，React会在JavaScript控制台中打印警告。
例如，我们有一个名为”Greeting”的组件，它接收一个名为”name”的props，我们期望它是一个字符串：
import PropTypes from 'prop-types';
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
Greeting.propTypes = {
name: PropTypes.string
};
在这个例子中，如果我们传入的”name”不是字符串，我们就会在控制台中看到一个警告。
验证props的目的主要有两个：
- 帮助开发者捕获错误：在开发过程中，如果一个组件期待的props类型和实际传入的不一致，可能会导致组件的行为出现问题。通过PropTypes的警告，我们可以及时发现并修复这种类型错误。
- 提供API文档：对于使用该组件的其他开发者来说，propTypes是一种指明组件期望接收什么类型的props的好方法。这也有助于组件的复用和维护。