面试题：React中利用Context API和条件渲染实现复杂权限控制及性能优化

1. 创建 Context

首先，我们需要创建一个 Context 来管理用户权限信息。

import React from 'react';

// 创建 Context
const PermissionsContext = React.createContext();

export default PermissionsContext;

2. 传递 Context

在应用的顶层组件中，通过 PermissionsContext.Provider 传递权限信息。假设我们从某个地方获取到了 permissions 对象。

import React from'react';
import ReactDOM from'react-dom';
import PermissionsContext from './PermissionsContext';

// 模拟获取的权限信息
const permissions = {
  create: true,
  read: true,
  update: false,
  delete: true
};

function App() {
  return (
    <PermissionsContext.Provider value={permissions}>
      {/* 应用的其他组件 */}
    </PermissionsContext.Provider>
  );
}

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

3. 组件条件渲染

每个组件通过 PermissionsContext.Consumer 来获取权限信息，并根据权限决定是否渲染。

import React from'react';
import PermissionsContext from './PermissionsContext';

function ComponentA() {
  return <div>这是 ComponentA，对应 create 权限</div>;
}

function ComponentB() {
  return <div>这是 ComponentB，对应 read 权限</div>;
}

function ComponentC() {
  return <div>这是 ComponentC，对应 update 权限</div>;
}

function ComponentD() {
  return <div>这是 ComponentD，对应 delete 权限</div>;
}

function ConditionalComponent({ permission, component }) {
  return (
    <PermissionsContext.Consumer>
      {permissions => {
        if (permissions[permission]) {
          return component;
        }
        return null;
      }}
    </PermissionsContext.Consumer>
  );
}

function App() {
  return (
    <PermissionsContext.Provider value={permissions}>
      <ConditionalComponent permission="create" component={<ComponentA />} />
      <ConditionalComponent permission="read" component={<ComponentB />} />
      <ConditionalComponent permission="update" component={<ComponentC />} />
      <ConditionalComponent permission="delete" component={<ComponentD />} />
    </PermissionsContext.Provider>
  );
}

4. 性能优化思路

React.memo：对于那些只依赖于 Context 中权限信息的组件，可以使用 React.memo 进行包裹。React.memo 是一个高阶组件，它会对组件的 props 进行浅比较，如果 props 没有变化，则不会重新渲染组件。

const MemoizedComponentA = React.memo(ComponentA);

使用 useMemo 或 useCallback：如果组件内有一些计算或函数定义，且依赖于 Context 中的权限信息，可以使用 useMemo 或 useCallback 来避免不必要的重新计算或重新定义。

function ComponentWithCalculation() {
  const { create } = useContext(PermissionsContext);
  const expensiveCalculation = useMemo(() => {
    // 进行一些复杂的计算，只有当 create 变化时才重新计算
    return create? '有创建权限时的计算结果' : '无创建权限时的计算结果';
  }, [create]);

  return <div>{expensiveCalculation}</div>;
}

通过以上方法，我们实现了基于 Context API 的权限管理以及相应的性能优化，避免了不必要的组件渲染。

星途面试题库

面试题：React中利用Context API和条件渲染实现复杂权限控制及性能优化

知识考点

面试题答案

1. 创建 Context

2. 传递 Context

3. 组件条件渲染

4. 性能优化思路