面试题：React 应用场景下，defaultProps 与 propTypes 结合及在复杂组件树中的优化使用

Question

在一个大型的 React 项目中，组件树结构复杂，涉及多层嵌套组件传递 props。请阐述如何将 defaultProps 与 propTypes 更好地结合使用，以确保数据的准确性和组件的健壮性。同时，针对复杂组件树场景，说明如何利用 defaultProps 进行性能优化，比如避免不必要的重新渲染等，并给出具体的优化思路和代码示例。

Answer 1

1. defaultProps 与 propTypes 结合使用确保数据准确性和组件健壮性

1. propTypes 进行类型检查：
   • 在 React 组件中，propTypes 用于定义组件所接收 props 的类型。这有助于在开发过程中捕获类型不匹配的错误。例如，假设我们有一个 Button 组件，它接收一个 text prop 用于显示按钮文本，并且接收一个 isDisabled prop 来控制按钮是否禁用。

   import React from'react';
   import PropTypes from 'prop-types';
   
   const Button = ({ text, isDisabled }) => {
     return <button disabled={isDisabled}>{text}</button>;
   };
   
   Button.propTypes = {
     text: PropTypes.string.isRequired,
     isDisabled: PropTypes.bool
   };
   

   • 这里 text 被定义为字符串类型且是必需的，isDisabled 被定义为布尔类型（如果不传入，默认值会通过 defaultProps 来确定）。这样如果传递给 Button 组件的 text 不是字符串类型，在开发环境中 React 会抛出警告。
2. defaultProps 设置默认值：
   • defaultProps 用于为组件的 props 设置默认值。这不仅可以避免在使用组件时忘记传入某些 props 导致的错误，还可以确保组件在各种情况下都能有合理的初始状态。

   Button.defaultProps = {
     isDisabled: false
   };
   

   • 这样即使在使用 Button 组件时没有传入 isDisabled prop，按钮也不会默认禁用。

2. 利用 defaultProps 进行性能优化（避免不必要的重新渲染）

1. 优化思路：
   • 在复杂组件树场景下，当父组件重新渲染时，即使子组件的 props 没有实际变化，也可能会因为引用类型的浅比较而导致子组件不必要的重新渲染。通过合理设置 defaultProps，可以减少这种情况的发生。
   • 例如，如果一个子组件接收一个对象类型的 prop，并且这个对象在父组件重新渲染时会重新创建（即使内容不变），可以在子组件中使用 defaultProps 并在比较时利用 Object.is() 等方法进行深度比较（如果对象结构复杂）。对于简单值类型，浅比较就足够了，defaultProps 可以确保初始值稳定。
2. 代码示例：
   • 假设我们有一个 UserInfo 组件，它接收一个 user 对象 prop 来显示用户信息。

   import React from'react';
   import PropTypes from 'prop-types';
   
   const UserInfo = ({ user }) => {
     return (
       <div>
         <p>Name: {user.name}</p>
         <p>Age: {user.age}</p>
       </div>
     );
   };
   
   UserInfo.propTypes = {
     user: PropTypes.shape({
       name: PropTypes.string.isRequired,
       age: PropTypes.number.isRequired
     })
   };
   
   UserInfo.defaultProps = {
     user: {
       name: 'Guest',
       age: 0
     }
   };
   
   export default UserInfo;
   

   • 在父组件中，我们可以这样使用：

   import React, { useState } from'react';
   import UserInfo from './UserInfo';
   
   const ParentComponent = () => {
     const [count, setCount] = useState(0);
     const user = { name: 'John', age: 25 };
   
     return (
       <div>
         <button onClick={() => setCount(count + 1)}>Increment</button>
         <UserInfo user={user} />
       </div>
     );
   };
   
   export default ParentComponent;
   

   • 这里即使父组件 ParentComponent 因为 count 的变化而重新渲染，UserInfo 组件的 user prop 实际内容没有变化（对象内部属性值未变），由于 UserInfo 组件有 defaultProps 设置，在浅比较时（如果是简单值类型比较）或者结合深度比较逻辑（对于复杂对象类型），可以避免不必要的重新渲染。如果没有 defaultProps，每次父组件重新渲染重新创建 user 对象（即使内容不变），可能导致 UserInfo 组件不必要的重新渲染。