React组件
2019-11-01 本文已影响0人
BlinglingSam
"组件就是拥有独立功能的视图模块，许多小的组件组成一个大的组件，整个页面就是由一个个组件组合而成。它的好处是利于重复利用和维护。"
react它只负责ui的渲染。与其他框架监听数据动态改变dom不同，react采用setState来控制视图的更新。setState会自动调用render函数，触发视图的重新渲染，如果仅仅只是state数据的变化而没有调用setState，并不会触发更新。
组件设计原则
高内聚：也就是说把逻辑紧密且内容相关的放在一个组件内。
低耦合： 不同组件之间的依赖关系要尽量弱化到最低，也就是说每个组件都尽量要独立。
组件内的数据
React组件内的数据分为两种：props和 state。二者都会引发页面的重新渲染，那么在开发过程中该如何选择？很简单，就原理来说： props是父组件传递到子组件的数据，也就是对外的一个状态。state是组件的内部状态，只能供组件内部使用。所以不改变的值使用props,而改变的值我们要使用state。
props属性
我们想要在组件之间进行传值，那么props属性就起到了这个作用。props不应该被组件修改，但可以通过父组件自动重新渲染来传入新的props，达到更新的目的。（为什么不应该呢？）
怎么读取及传递？
state
state是组件内部的状态，状态就是组件在某种显示情况下的数据，由组件自己设置和修改，也就是说由组件自己维护，state存在的目的就是让组件来改变的。但是state是无法直接修改的，需要使用特殊的更改状态的 方法： setState()。每一次通过this.setState函数修改state就改变了组件的状态，然后通过渲染过程把这种变化体现出来；
setState
setState主要用来改变state的状态，它有两个参数:
this.setState({data: newData},
()=>{
console.log('为了解决异步带来的无法获取最新的状态的回调函数')
})
