React 中的组件类型（总计）？

Question

因为我正在学习“React”，所以我知道 React 中有两种类型的组件：

Class基
功能正常

现在，在进行一些采访时，我遇到了以下问题：

智能组件
哑组件
纯成分
不纯成分
高阶分量

此外...

聪明与愚蠢的组件
纯与不纯成分
常规与纯组件

现在，我更糊涂了，因为我只知道只有两种类型的组件。那么有人可以帮助我吗 - 这些其他组件是什么，或者如果它们也是 React 的一部分，in total what are the different types of Components in React?

Answer 1

一个 class 组件是一个 class 带有渲染方法，React 将调用该渲染方法来渲染 jsx，而功能组件是一个函数，React 将调用传递道具给它和函数将 return jsx 用于 React 渲染。

智能组件是有逻辑的组件，如果是class那么组件可能有本地状态（this.state），如果是智能功能组件那么组件可能有一些钩子(const [state,setState]=useState(initialState)).

笨组件只根据传入的 props 生成 jsx，没有任何逻辑，所以笨 class 组件只有渲染方法，笨功能组件没有钩子。

一个纯组件只有在传递给它的 props 发生变化时才会重新渲染，但是当纯组件有 hooks 它可以重新渲染，即使 props 没有改变（比如当你在组件中使用 useSelector 时）但是从技术上讲，该组件有副作用并且不纯净。纯 class 组件扩展 React.PureComponent 而纯函数组件不存在，您可以将函数组件传递给 React.memo 但 React.memo(FunctionalComponent) 的结果不是函数。因此，您可以使用备忘录 HOC 从功能组件创建新的纯组件，但纯组件永远不是函数。

非纯组件可以是具有副作用的组件，例如在 onMount 方法中调用 class 组件中的 api 方法，或者使用 useEffect 在功能组件中调用效果。具有任何类型的自身状态（useState 或 this.state）的组件也不是纯粹的。

高阶组件类似于 React-Redux connect 和 React memo。它是一个接收组件和 return 新组件的函数。

以下是一些示例（没有 class 个组件）：

//fake api that resolves later
const api = () =>
  new Promise((resolve) =>
    setTimeout(() => resolve([1, 2, 3]), 2000)
  );

//HOC using props.loading to display loading
const withLoading = (Component) => (props) =>
  props.loading ? 'loading' : <Component {...props} />;
//pure component will only re render when props change
//  also dumb component as it only returns jsx
//  and using HOC React.memo to create List
const List = React.memo(function List({ data }) {
  return <pre>{JSON.stringify(data, undefined, 2)}</pre>;
});
//this will display loading using the withLoading HOC
const LoadingList = withLoading(List);
//functional impure component (has side effect fetching data and local state)
const App = () => {
  //smart component as App uses state and does more than only return jsx
  const [data, setData] = React.useState({ loading: true });
  React.useEffect(() => {
    api().then((data) =>
      setData({
        loading: false,
        data,
      })
    );
  });
  return <LoadingList {...data} />;
};

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

React 中的组件类型（总计）？

Types of Components in React (in Total)?

javascript

ecmascript-6

reactjs

react-component