React学习(四)：使用组件构建应用程序

一 属性校验

1.propTypes

它可以用来记录组件，声明可以使用哪些属性，哪些属性是必须的，属性可以接受的数据类型等，当误用了组件时会在控制台显示一个错误信息。语法为：Greeter.propTypes = { salutation: PropTypes.string.isRequired } 。

可以为属性设置默认值，语法如下：Greeter.defaultProps = { salutation: "Hello World"}。

2.校验器

PropTypes.array 属性必须是个数组；PropTypes.bool 属性必须是个布尔值；PropTypes.func属性必须是个函数；PropTypes.number 属性必须是个数字；PropTypes.object 属性必须是个对象；PropTypes.string  属性必须是个数字符串；PropTypes.oneOfType属性必须是以下指定类型中的一种；PropTypes.arrayOf 属性必须是一种指定数据类型的数组；PropTypes.objectOf 属性必须是带有制定类型值的属性值的对象；PropTypes.shape属性必须是符合特定格式的对象等等。

3. 自定义校验器

校验器其实就是个函数，它接收的参数是一组属性，要检查的属性名称，组件的名称，可以用自定义的校验器限定用户输入的字符长度等。

二 组件组合

1.组件分类：

组件一般分为两类：有状态组件和单纯组件；其中有状态组件拥有state，而单纯组件没有state，它只接受props，并把这属性渲染到视图中。对于新手而言，最困难的是找到哪些组件应为有状态组件。

2.有状态组件：

找到基于状态来渲染的组件－>找到一个通用的owner组件－>通用组件拥有那个state

3.数据流和组件通信

在一个应用中，数据沿着组件的层级从上向下传递，然而在一些工程中，还需要子组件和父组件的通信，这可以通过父组件最为props传递而来的回调进行。

三 数据获取

数据获取即从远端来获取数据，这里需要注意的是，必须在一个组件特定的生命周期获取数据－componentDidMount生命周期函数。我们应当避免将数据获取的逻辑添加到已负责其他事项的组件上，应当创建一个新的有状态组件，来专门负责和远端的API通信，并将数据和回调以props方式向下传递，这种类型的组件被称为“容器组件”。

四 浅谈不变性

1.React提供了一个setState方法来更新UI状态，不应直接修改this.state，应该认为this.state是不变的，原因如下：使用this.state绕过了react的状态管理；在这之后调用setState时会将之前的this.state的更改覆盖掉；使用this.state会使得之后改善 性能变的不太可能了。

性能取决于检查一个对象是否被修改过，但在js中这种操作代价高昂，有个更简洁的办法实现：对象被更改时不是直接修改他，而是替换他，那么要查看是否被修改久快很多了，这就是不变性的概念，我们不去直接修改一个对象而是替换它。

2.替换组件

想要不修改组件，需要使用非侵入的方法，进行处理时许返回新的数组，而不是在原数组上进行修改，如map，filter，concat都是这种非侵入式数组的方法，基于原对象生成新的对象还有其他方式，如使用object.assign，他会将所有给定的对象上的属性合并到目标对象，Object.assign(target, source_1, ... ,source_n),他会遍历source_1的所有属性复制到target上，然后对source_2和之后的对象做同样的事。

3.不变性助手

1⃣️上述情况在大多数情况下可以满足我们的需求，但是当state中包含嵌套的对象或数组时，问题会变的棘手，因为上述方式不会做深度的复制，而数组与对象都是通过引用的方式传递，在这时，我们可以使用react不变性助手－update。update函数接受两个参数，一个是你想要更新的对象或数组，第二个是描述你在何处进行何种修改的对象。举例如下：

 let student = {name:'Mary', grades:['A', 'B', 'C']} ----let newStudent = update(student, {grades:{ $push: ['A']}});指定在何处修改时，可使用数组索引。

2⃣️可用的指令

 $push：向数组的尾部添加元素；$unshift：像数组头部添加元素； $splice：选定的位置增删元素； $set：完整的替换整个目标； $merge：键合到目标对象中；$apply：对函数传入的值进行修改然后返回修改后的结果。