面试题：React Props 性能优化及边界情况处理

Props传递性能优化

浅比较

使用React.memo：对于函数组件，可以使用React.memo来包裹组件。React.memo会对组件的props进行浅比较，如果前后两次props浅比较结果相同，那么组件将不会重新渲染。例如：

import React from'react';

const MyComponent = React.memo((props) => {
  return <div>{props.value}</div>;
});

export default MyComponent;

类组件使用shouldComponentUpdate：在类组件中，可以重写shouldComponentUpdate方法，手动进行props的浅比较。例如：

import React, { Component } from'react';

class MyClassComponent extends Component {
  shouldComponentUpdate(nextProps) {
    // 浅比较props
    return JSON.stringify(this.props)!== JSON.stringify(nextProps);
  }
  render() {
    return <div>{this.props.value}</div>;
  }
}

export default MyClassComponent;

不可变数据处理

使用immutable.js库：通过这个库创建不可变数据结构，当数据变化时，会返回新的对象或数据结构，并且能高效地进行比较。例如：

import React from'react';
import { Map } from 'immutable';

const MyComponent = React.memo((props) => {
  const myImmutableData = Map(props.data);
  return <div>{myImmutableData.get('key')}</div>;
});

export default MyComponent;

使用展开运算符（...）：在更新对象或数组时，使用展开运算符创建新的对象或数组，而不是直接修改原数据。例如：

import React, { useState } from'react';

const MyComponent = () => {
  const [data, setData] = useState({ name: 'John' });
  const handleClick = () => {
    setData({...data, age: 30 });
  };
  return (
    <div>
      <button onClick={handleClick}>Update Data</button>
    </div>
  );
};

export default MyComponent;

减少不必要的Props传递
- 状态提升：将多个组件共享的状态提升到它们最近的共同父组件，避免不必要的层层传递。例如，如果组件A和组件B都需要使用状态count，可以将count提升到它们的父组件Parent中，然后通过props分别传递给A和B。
- 使用上下文（Context）：对于一些全局共享的数据，如用户信息、主题等，可以使用React的上下文（Context），避免在多个层级间传递props。例如：
```
import React, { createContext, useState } from'react';

const UserContext = createContext();

const ParentComponent = () => {
  const [user, setUser] = useState({ name: 'Jane' });
  return (
    <UserContext.Provider value={{ user, setUser }}>
      {/* 子组件可以直接使用上下文数据，无需层层传递props */}
    </UserContext.Provider>
  );
};

export default ParentComponent;
```

处理Props传递中的边界情况

数据类型不匹配

使用类型检查库：如prop-types库，可以在开发环境中对props的数据类型进行检查。例如：

import React from'react';
import PropTypes from 'prop-types';

const MyComponent = (props) => {
  return <div>{props.value}</div>;
};

MyComponent.propTypes = {
  value: PropTypes.number.isRequired
};

export default MyComponent;

TypeScript：在React项目中使用TypeScript，通过类型定义可以在编译阶段就发现props数据类型不匹配的问题。例如：

import React from'react';

type MyProps = {
  value: number;
};

const MyComponent: React.FC<MyProps> = ({ value }) => {
  return <div>{value}</div>;
};

export default MyComponent;

未定义情况

设置默认值：在函数组件中，可以通过defaultProps设置props的默认值。例如：

import React from'react';

const MyComponent = (props) => {
  return <div>{props.value}</div>;
};

MyComponent.defaultProps = {
  value: 'default value'
};

export default MyComponent;

在渲染中处理：在组件渲染逻辑中，对可能未定义的props进行检查和处理。例如：

import React from'react';

const MyComponent = (props) => {
  const displayValue = props.value? props.value : 'No value provided';
  return <div>{displayValue}</div>;
};

export default MyComponent;

星途面试题库

面试题：React Props 性能优化及边界情况处理

知识考点

面试题答案

Props传递性能优化

处理Props传递中的边界情况