深入浅出React和Redux(一) prop和state

买了本书,好好来深入浅出一下吧!
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的数据,因为这样会导致各种混乱