最近很少写react的项目的,怕自己会遗忘掉,所以给自己写个博客记录一下。
众所周知react和vue一样,也是基于组件化开发的,那开发组件的方式有哪几种呢?我大概总结了一下我在项目中用到的方式。
- 使用es6关键字通过class继承React.Component的方式编写组件。(状态组件)组件中需要定义构造器constructor,还需要调用父类的构造器super(props),这样,你就可以在组件中使用reactComponent 父类提供的一些生命周期函数,使用state组件状态管理等等,是具有状态的组件。(注意:使用es5原生方式也可以使用React.createClass的方法创建一个组件,但由于项目中不经常使用,所以这里不提及。)
//计数器组件
class number extends React.Component {
constructor(props) {
super(props);
this.state = {
num:0
}
}
add(){
//业务代码...
}
cut(){
//业务代码...
}
render() {
let { number } = this.props
return (<div>
计数器redux例子(+和-,改变数值)
<div>
<Button type="primary" shape="circle" onClick={()=>{this.add()}} >+</Button>
<Button type="primary" shape="circle" onClick={()=>{this.cut()}} >-</Button>
</div>
<div>数值:{number}</div>
</div>);
}
}
- 函数式声明组件(无状态组件)通过箭头函数的形式创建了一个无状态的组件,为什么说是无状态组件呢?这是因为函数式组件并不具有自己的state状态管理,而且像一些react提供的钩子函数也是无法使用的。可以想象它是一个容器一样的组件,只是接收父组件传递过来的值,并对其进行显示,或者进行数据简单处理后显示,组件本身不具备状态。
//计数器组件
class number extends React.Component {
constructor(props) {
super(props);
this.state = {
num:0
}
}
add(){
//业务代码...
}
cut(){
//业务代码...
}
render() {
let { number } = this.props
return (<div>
计数器redux例子(+和-,改变数值)
<div>
<Button type="primary" shape="circle" onClick={()=>{this.add()}} >+</Button>
<Button type="primary" shape="circle" onClick={()=>{this.cut()}} >-</Button>
</div>
<div>数值:{number}</div>
<NumberBox number={number}></NumberBox>
</div>);
}
}
const NumberBox = (props) => {
let add1 = props.number + 1
return ( <div>这里是数字盒子{add1} = {props.number} + 1</div> )
}