使用 function 构造函数创建组件和使用 class 关键字创建组件

Posted 2022-04-04 ll15888

使用 function 构造函数创建组件：

 

如果想要把组件放到页面中，可以把构造函数的名称，当作 组件的名称，以 html标签形式引入页面中，

因为在React中，构造函数就是一个最基本的组件。

 

注意：

 

组件的首字母必须是大写

因为React在解析所有的标签的时候，是以标签的首字母来区分的，
如果标签的首字母是小写，那么就按照 普通的 HTML 标签来解析，
如果首字母是大写，则按照组件的形式去解析渲染。

 

格式：

创建：

 

 function Hello(props) 
   // 在组件中，如果想要使用外部传递过来的数据，必须，显示的在 构造函数参数列表中，定义 props 属性来接收；
   // 通过 props 得到的任何数据都是只读的，不能从新赋值
   // props.name = ‘000‘。无效
   return <div>
                   <h1>这是在Hello组件中定义的元素 --- props.name</h1>
             </div>
 

 

使用：

ReactDOM.render(<div>
  
/* <Hello name=person.name age=person.age gender=person.gender address=person.address></Hello> */

/* 上面的方法太麻烦，下面使用ES6中的属性扩散‘...’ */
 

  <Hello ...person></Hello>

                         </div>, document.getElementById(‘app‘))

// 这里 ...Obj  语法，是 ES6中的属性扩散， 表示，把这个对象上的所有属性，展开了，放到这个位置

 

 

 

使用 class 关键字创建组件

class Person extends React.Component

render()
// 在render函数中，必须返回一个null或者符合规范的虚拟DOM元素
return <div>
                   <h1>这是用 class 关键字创建的组件！</h1>
          </div>;


```

区别：

 

使用 function 构造函数创建的组件，内部没有 state 私有数据，只有 一个 props 来接收外界传递过来的数据；所以

叫做【无状态组件】

使用 class 关键字 创建的组件，内部，除了有 this.props 这个只读属性之外，还有一个 专门用于 存放自己私有数据的 this.state 属性，这个 state 是可读可写的！

所以叫做【有状态组件】

有状态组件和无状态组件，最本质的区别，就是有无 state 属性；同时， class 创建的组件，有自己的生命周期函数，但是，function 创建的 组件，没有自己的生命周期函数；

使用场景：

1. 如果一个组件需要存放自己的私有数据，或者需要在组件的不同阶段执行不同的业务逻辑，此时，非常适合用 class 创建出来的有状态组件；
2. 如果一个组件，只需要根据外界传递过来的 props，渲染固定的 页面结构就完事儿了，此时，非常适合使用 function 创建出来的 无状态组件；（使用无状态组件的好处就是运行速度会快一点）