本文共 3539 字，大约阅读时间需要 11 分钟。

React 组件开发实用指南

一、组件的基本使用法

在 React 中，每个组件都有两类主要的数据来源。

• this.state：这是组件内部定义的状态数据，通常用于管理组件自身的状态。
• this.props：这是组件接受的属性数据，通常来自组件外部的父组件。

示例代码：

class Person extends React.Component {
  render() {
    const { name, age, sex } = this.props;
    return (
      
   
        
    
姓名：{name}
        
    
性别：{sex}
        
    
年龄：{age}
      
   
    );
  }
}
const p = { name: 'tom', age: 18, sex: 'man' };
ReactDOM.render(
   , document.getElementById('test'));

特别注意：

• 使用展开运算符 ...p 时，必须在 JSX 中，在对象字面量的开头使用 { 否则会报错。
• {...p} 并不是为了构造字面量对象，而是 React 组件属性传递的语法要求。

二、类型约束与默认值参数

为了确保组件接收的 props 数据类型符合预期，React 提供了 propTypes 考虑第二种方式：

使用 propTypes 的方式：

class Person extends React.Component {
  static propTypes = {
    name: PropTypes.string.isRequired,
    age: PropTypes.number,
    sex: PropTypes.string,
    speak: PropTypes.func,
  };
  static defaultProps = {
    age: 18,
    sex: '未知性别',
  };
  render() {
    const { name, age, sex } = this.props;
    return (
      
   
        
    
姓名：{name}
        
    
性别：{sex}
        
    
年龄：{age + 1}
      
   
    );
  }
}

特别说明：

• 如果某个 prop 是必填的，可以在 propTypes 中使用 .isRequired 标记。
• 对于函数类型的 prop，可以使用 .func 作为类型检查依据。
• defaultProps 用于指定 props 的默认值，类似于函数参数的默认值。

简写方式：

将 propTypes 和 defaultProps 直接定义在组件类上：

class Person extends React.Component {
  // static �
   
    >
  static propTypes = {
    name: PropTypes.string.isRequired,
    age: PropTypes.number,
    sex: PropTypes.string,
  };
  static defaultProps = {
    age: 18,
    sex: '未知性别',
  };
  ...
}
   

三、props 只读性

props 是只读的，不能直接修改。例如：

this.props.name = 'test'; // 会报错

但是如果传入的 props 是引用类型：

this.props.obj.name = 'test'; // 这个是可以修改的，但不要这样做

为什么不推荐这样做？

• 传递给组件的 props 通常会被多个组件共享。
• 做这种修改会导致组件的行为难以调试和维护。

四、标签体内容

在 React 中，标签体的内容会被作为 children 属性传入到组件中。

示例代码：

const p = { name: 'tom', age: 18, sex: 'man' };
ReactDOM.render(
  
   
    
    ,
  
   
,
  document.getElementById('test')
);

注意事项：

• 标签体的内容会被视为 children，而不是被直接传到组件的 props 中。
• 如果需要传递多个属性，可以在外层字面量中使用展开运算符。

五、构造器到底需不需要写？

从 React 的官方文档可以发现，构造器 (constructor) 在大多数情况下是可以省略的。

何时需要写构造器？

• 如果需要在组件中初始化状态，可以在构造器外部定义状态。
• 如果需要在构造器中使用 bind 方法绑定事件处理函数的 this_Reference。
• 如果需要在构造器中访问 props，这种做法并没有实际意义，因为组件实例中已经具备 this.props 属性。

构造器示例：

class Weather extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isHot: false,
      wind: '微风',
    };
  }
  render() {
    const { isHot, wind } = this.state;
    return (
      
 this.weatherClick()}>
        今天天气很 {isHot ? '炎热' : '凉爽'} {wind}
      
    );
  }
  weatherClick = () => {
    const currentIsHot = this.state.isHot;
    this.setState({ isHot: !currentIsHot });
  };
}

构造器的核心用途：

• 初始化组件内部状态。
• 在函数式组件中绑定事件处理函数的 this。

六、props 在构造器中的使用

在构造器中，可以通过 super(props) 接收组件实例的 props。

class Person extends React.Component {
  constructor(props) {
    super(props);
    console.log('constructor', this.props);
  }
  render() {
    const { name, sex, age } = this.props;
    return (
      
   
        
    
姓名：{name}
        
    
性别：{sex}
        
    
年龄：{age}
      
   
    );
  }
}
ReactDOM.render(
  
   
    
    ,
  
   
,
  document.getElementById('app')
);

关键点：

• 如果组件的父组件传递了 props，则在构造器中可以通过 this.props 访问到这些属性。
• 如果构造器不传递 props 给 super()，则 this.props 中不会包含传入的属性。

七、函数式组件中的 props

在函数式组件中，直接对 props 进行操作是允许的。

示例代码：

function Person(prop) {
  const { name, sex, age } = prop;
  return (
    
   
      
    
姓名：{name}
      
    
性别：{sex}
      
    
年龄：{age}
    
   
  );
}
Person.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number,
  sex: PropTypes.string,
  speak: PropTypes.func,
};
Person.defaultProps = {
  age: 18,
  sex: '未知性别',
};

希望这篇文章能帮助你更好地理解 React 组件开发！