码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-07-11 12:44:57      阅读:96      评论:0      收藏:0      [点我收藏+]

标签:引入   赋值   格式   xtend   执行   虚拟   component   ret   列表   

使用 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 创建出来的 无状态组件;(使用无状态组件的好处就是运行速度会快一点)
 

 

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

标签:引入   赋值   格式   xtend   执行   虚拟   component   ret   列表   

原文地址:https://www.cnblogs.com/ll15888/p/11168969.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!