买了本书,好好来深入浅出一下吧!
react和vue一样,最核心的一个就是组件化的思想,每个组件分而治之,把一个个小的模块最后组成一个大的作品,有利于复用和各种维护
从第二章开始记录起
如何吧一个个组件串联起来,最后组成一个完整的作品呢?首先要解决每个组件间的联系吧!
prop
这个用于接收组件外部的数据,接收了数据就可以处理或者展示.当然如果组件要把数据返回给外部,也是可以用prop的
传递prop值
<Mycomponent num={10}></Mycomponent>
这就是一个封装好的组件,传值的时候可以支持任何js的数据类型,只要不是字符串都用大括号包着
读取prop值
class MyComponent extends Component {
constructor(props) {
super(props)
this.state = {
num : props.num
}
}
render() {
return (
<div className="MyComponent">
<p>{this.state.num}</p>//或者直接调用this.props.num也是可以的
</div>
);
}
}
constructor是构造函数,书上写着,如果要定义构造函数第一行就要super(props)调用一下,否则就无法通过props读取到传值,当然如果不调用constructor的话,也是不用super的
propTypes检测
读取和传递都解决了,但是肯定要对传递的数据做一个规范,
1,组件支持哪些prop
2.每个prop应该是怎么样的格式
要引入propTypes,然后通过下面的方法设置一下就可以设置传递的参数,即使你不按照规则,好像页面也不会有问题,只是console里面会报错而已,propTypes原来只是辅助开发功能而已,并不能强硬的限制传递的参数
import React, {Component} from 'react';
import propTypes from 'prop-types';
class MyComponent extends Component {
render() {
return (
<div className="MyComponent">
<p>{this.props.num}</p>
</div>
);
}
}
MyComponent.propTypes = {
num:propTypes.number
}
export default MyComponent;
上面就是外部传递的数据了,接下来到内部自己处理的数据,为什么需要这个呢,因为外部传递的prop是不能修改的,所以要把它赋值给内部的state里面,然后就可以随意使用的修改了
组件的state
初始化state
通常会在组件的构造函数结尾初始化state
import React, {Component} from 'react';
class MyComponent extends Component {
constructor(props){
super(props)
this.state={ //必须是一个对象
num:props.num || 0 //这里是初始化state的地方,因为也有可能不会传值,所以要||
}
}
render() {
return (
<div className="MyComponent">
<p>{this.state.num}</p>
</div>
);
}
}
MyComponent.defaultProps={
num:5 //也可以利用这种设定去设置如果没有接收的参数设置为
}
export default MyComponent;
读取和更新state
更新state要调用一个叫setState的方法,按下面的方式调用一下就可以了
addNum = () =>{
this.setState(
{num:this.state.num+1}
)
}
至于为什么要调用呢?不可以直接赋值呢?在vue里面都是直接赋值直接更新的
addNum = () =>{
this.state.num = this.state.num++
}
像这种方式呢,其实state的数据是变了的,但是只是没有触发更新,要调用setState去刷新就可以看到数据的变化,这个和vue就有点不太一样了,但是感觉这样性能应该会高一点,当我需要的时候再去调用更新,和vue实时监测更新,这个应该是更加节省性能!
总结一下:prop是外部传递的数据,state是内部储存和处理的数据,并且组件最好不要去改prop的数据,因为这样会导致各种混乱
