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

React 自定义组件的两种方式

时间:2020-05-17 16:17:57      阅读:124      评论:0      收藏:0      [点我收藏+]

标签:创建   log   func   UNC   方式   function   div   from   xtend   

React 自定义组件的两种方式:

函数组件和类组件

 

第一种,函数组件(无状态,即无私有属性,state):

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

第二种,类(ES6)组件(有状态。即有私有属性,state):

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

一般完整的类组件,示例:

import React, { Component } from "react"; 

class Hello extends Component {

// 构造函数
constructor(props){
super(props);

// 声明私有数据 (类似vue中data的作用)
this.state = { msg:‘123‘ }
}
render() {
console.log(this.state)
// 打印查看
return (
<div>
{/* 在组件中使用私有数据 */}
<h1>{this.state.msg}</h1>
</div> );
}
}
export default Hello;

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

如果组件内,不需要有私有的数据,即不需要  state,此时,使用函数创建无状态组件比较合适;
如果组件内,需要有自己私有的数据,即需要  state,则,使用 class 关键字 创建有状态组件比较合适;

组件中的 props 和 state 之间的区别

props 中存储的数据,都是外界传递到组件中的;
props 中的数据,都是只读的;
state 中的数据,都是组件内私有的;
state 中的数据,都是可读可写的;
props 在 有状态组件 和 无状态组件中,都有;
state 只有在 有状态组件中才能使用;无状态组件中,没有 state;

 

React 自定义组件的两种方式

标签:创建   log   func   UNC   方式   function   div   from   xtend   

原文地址:https://www.cnblogs.com/zqblog1314/p/12905423.html

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