387 - 《那些老派的 React 面试题》

来自付费课程 React of Joy 其中一节的整理。

这些问题完全过时，但你搜「React 面试问题」却经常能搜到。由于面试官或者他的题库比较「老派」，所以作为面试者，通常也不得不准备这些问题。

1、Presentational 和 Container 组件有啥区别？

2015 年，Dan Abramov 写了篇博客叫《Presentational and Container Components》。文章建议了一种设计模式，把组件分为两类：Presentational 和 Container。前者是纯组件，基于 props 渲染界面；后者用于管理 Presentational 组件的状态和逻辑。

比如这样。

function Counter({ count, increment }) {
  return <button onClick={increment}> Current count: {count} </button>;
}
function CounterContainer() {
  const [count, setCount] = React.useState(0);
  function increment() {
    setCount(count + 1);
  }
  return <Counter count={count} increment={increment} />;
}
export default CounterContainer;

现在这种模式已很少有人提及，创建者 Dan Abramov 也不再推荐。取而代之的方法是：将复杂的业务逻辑移到自定义 Hooks 里。

2、什么是高阶组件？

高阶组件简称「HOC」。他是一个函数，接受一个组件并将其包装在一个新的内部组件中。

比如。

function withUser(WrappedComponent) {
  return (props) => {
    const { data } = useSWR("/api/user", fetcher);
    return <WrappedComponent user={data} {...props} />;
  };
}

withUser 函数接受一个输入组件，并生成一种方法，用于渲染该输入组件，并「锁定」部分属性。

然后就可以这样。

const DashboardWithUser = withUser(Dashboard);
// We then render this element:
<DashboardWithUser />

HOC 的目的通常是为了在多个组件之间共享逻辑。在 hooks 出现之前，没有更好的方法可以在组件之间共享逻辑，所以我们不得不搞一些有创意的事情。hooks 出现之后就可以用自定义 Hook 的方式来解这个问题了，比如构建一个 useUser 的 Hook。

function useUser() {
  const { data } = useSWR("/api/user", fetcher);
  return data;
}

3、请列举 𝑛 个生命周期方法。

React 组件在过去是 JavaScript Class。

class Button extends React.Component {
  state = { count: 0 };
  handleClick = () => {
    console.log("Clicked!");
    this.setState({ count: this.state.count + 1 });
  };
  rend