React 中useMemo 和 useEffect 的执行先后顺序

React 中的 useMemo 和 useEffect 是两个不同的 Hook，每个 Hook 的执行顺序取决于它们在组件中的位置。

useMemo 会在 React 渲染期间被调用，它可以帮助你在组件更新时优化性能。useMemo 返回的数据会被缓存，以便下次渲染时直接使用，而不必重新计算。

useEffect 在 React 渲染之后被调用，它可以在组件更新后执行任意操作。useEffect 中的函数可以访问到最新的 state 和 props，它可以帮助你管理副作用，例如订阅和解除订阅、请求数据和更新 UI 等。

所以，一般来说 useMemo 会在 useEffect 之前被调用。但是，具体的执行顺序取决于 React 是如何递归渲染组件的。

相关问题

react 与 react hook生命周期对照

以下是React中class组件生命周期和function组件中对应的Hook的对照表：

| Class组件生命周期 | 对应的Hook |
| --- | --- |
| constructor(props) | useState(initialState) |
| componentWillMount() | 无对应Hook |
| render() | useState()、use()、useContext() |
| componentDidMount() | useEffect(callback, []) |
| shouldComponentUpdate(nextProps, nextState) | useMemo()、React.memo() |
| componentWillUpdate(nextProps, nextState) | 无对应Hook |
| componentDidUpdate(prevProps, prevState) | useEffect(callback) |
| componentWillUnmount() | useEffect(() => { return () => {} }) |

需要注意的是，由于Hook是在函数组件中使用的，所以没有像class组件中的constructor和componentWillMount这样的生命周期函数。另外，由于Hook是基于函数的，所以它们的执行顺序是固定的，而class组件的生命周期函数的执行顺序是不固定的。