1.5 创建 react 组件

常用的创建 React 组件的方式有两种：1.用构造函数创建组件；2.用 class 关键字创建组件

用构造函数创建的组件叫无状态组件。用 class 关键字创建的组件叫做有状态组件。有状态组件和无状态组件的本质区别是有无state属性和有无生命周期函数。

• 使用构造函数创建组件

  如果需要传参，在函数中加入一个 props 参数来接收，并且必须向外界 return 一个合法的 JSX 语法创建的虚拟 DOM.

  //1.组件名首字母要大写  2.必须 return 合法的jsx  
  function Person(props){
      //props 为父组件传过来的数据
      console.log(props);
      return <div>
          姓名：{props.name}，性别：{props.sex}，年龄：{props.age}，
      </div>
  }
  
  //相当于父组件
  const student = {
      name:"liming",
      sex:"man",
      age:"20"
  };
  
  //将组件渲染到页面上来
  //有两个参数，1.组件名称，外面还可以有包裹元素 2.将组件渲染到的指定位置，也就是指定的 DOM 元素上
  //有三种方法：选择其中一种即可
  
  //1.直接赋值
  ReactDOM.render(
      <Person name="liming" sex="man" age="20" />,
      document.getElementById("example")
  );
  
  //2.用 ES6 的展开运算符
  ReactDOM.render(
      <Person {...student}/>,
      document.getElementById("example")
  );
  
  //3.使用 . 取值的形式
  ReactDOM.render(
      <div>
          <Person name={student.name} sex={student.sex} age={student.age}/>
      </div>,
      document.getElementById("example")
  );
  
  

  无状态组件只用 props，没有自己的私有数据和生命周期函数。

• 使用 Class 关键字创建组件

  //父组件参数
  const student = {
      name:"liming",
      sex:"man",
      age:"20"
  };
  
  //子组件
  class School extends React.Component{
      constructor(){
          //父组件数据
          super();
          //子组件私有数据
          this.state = {
          pet:"cute",
          hobby:"football",
      }
  };
  render(){
      return <div>
          姓名：{this.props.name},
          性别：{this.props.sex},
          年龄：{this.props.age},
          宠物：{this.state.pet},
          爱好：{this.state.hobby}
          </div>
      }
  }
  //渲染到页面上
  ReactDOM.render(
      <div>
      	<School {...student}/>
      </div>,
      document.getElementById("example")
  );
  

• 什么情况下使用有状态组件，什么情况下使用无状态组件

  一个组件如果需要有自己的私有数据，使用有状态组件，反之则推荐使用无状态组件；

  无状态组件因为没有自己的 state 和生命周期函数，所以运行效率比有状态组件稍高。

• 组件中 props 和 state 的区别

  props 的数据都是外界传递过来的，state 的数据都是组件私有的。

  props 的数据都是只读的，不能重新赋值，state 的数据是可以读写的。

---

如何创建高质量的 react 组件？

构建高质量React组件的原则和方法，包括以下内容：

• 划分组件边界的原则；
• React组件的数据种类；
• React组件的生命周期；

划分组件要遵守"高内聚，低耦合"的原则。

拆分组件最关键的是确定组件的边界，每个组件都应该是可以独立存在的，如果两个组件逻辑太紧密，无法清晰定义各自的责任，那这两个组件就不应该被拆开。

虽然组件是应该独立存在的，但并不是说组件间就像孤岛一样的存在着，不同组件间会有通信交流，以此完成更大的功能。

高内聚是指把逻辑紧密相关的内容放在一个组件中。传统上，把内容放在HTML文件中，把样式放在CSS文件中，把交互放在JavaScript文件中，其实这样并不满足高内聚的原则。React却不是这样，展示内容的JSX、定义行为的JavaScript和定义样式的CSS，都可以放在一个JavaScript文件中，因为他们本来就是为了实现一个目的而存在的，所以React天生具有高内聚的特点。

低耦合指的是不同组件之间的依赖关系要尽量弱化，也就是每个组件要尽量独立。通常我们需要根据功能点划分模块，让不同的组件去实现不同的功能。

React组件的数据种类

React组件的数据分为两种，prop 和 state，无论 prop 或者 state 的改变，都可能引起组件的重新渲染。那么设计一个组件的时候，什么时候用prop什么时候用state呢？其实很简单，prop是组件的对外接口，state是组件的内部状态，对外用prop，对内用state。