《深入React技术栈》个人总结之1.4React数据流（打卡三）

其实单纯的react并不是一个框架，在其官网上就有这么说明：react是个view js 库。

今天开始学习React数据流（之后会学习redux），接下来就会带领大家进入编码世界。

在React中，数据是之上而下的单项数据流（vue也是单向数据流且是双向数据绑定“v-model”指令），即从父组件到子组件。这条原则让组件关系变的简单且可预测

state与props是react组件中一个很重要的概念。

在顶层组件初始化props，react向下遍历整个组件树并且重新渲染所有相关的子组件。但是state只关心自己组件内部的状态，且这些状态中只能在组件内部改变。如果把组件看成一个函数的话，他就接受了props作为参数，内部由state作为函数的内部参数，最终返回一个虚拟DOM的实现。

 

1.4.1   state

在react没有结合Flux或者Redux（关于Flux与Redux后期我会各写一篇自己对它们的结构和工作流程的理解）框架前，其自身同样也可以管理组件的内部状态。在react中，把这一类状态统一称为state。

开始编码之前先大家一个提高开发效率的小技巧（vs code）

在文件=>首选项=>用户代码片段, 选择javascript react 在弹出来的新文件里输入下面的代码：
 

{
	"JSX": {
			"prefix": "jsx", // 触发的关键字 输入jsx按下tab键
			"body": [
					"import React from 'react'",
					"",// 空的一行
					"class Demo extends React.Component {",
					"\tconstructor(props) {",
					"\t\tsuper(props);",
					"\t\tthis.state\t=\t{",
					"",	
					"\t\t}",
					"\t}",	
					"\trender() {", // 有制表符的一行
					"\t\treturn (",
					"\t\t\t$1",    // 光标首次出现的位置            
					"\t\t)",
					"\t}",
					"}",
					"",
					"export default Demo",
			]
	}
}

现在让我们实现一个计数器的组件：

import React from 'react'

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state	=	{
      count: 0
    }
    this.handleClick = this.handleClick.bind(this)//在这里
  }
  // 个人比较建议下面的写法
  // 上面的那个绑定即（this.handleClick = this.handleClick.bind(this)）就可以去除掉了
  // handleClick = () => {

  // }
  handleClick(e) {
    e.preventDeault();
    this.setState({
      count: count + 1
    })
  }
  render() {
    const { count } = this.props
    return (
      

        
{count}
        更新
      
    )
  }
}

export default Counter

 当组件内部使用库内置的setState方法时，最大的表现行为就是该组件会重新渲染（改变了内部状态，组件需要更新）。

在这里我们的注意：setState是一个异步的方法，一个生命周期内所有的setState方法会合并操作。

有了这个特性，我们完全可以只用react来完成对行为的控制数据的更新和界面的渲染，当然，随着内容的深入，并不建议开发者使用这个方法，因为过多的使用setState这个方法，内部的状态会让数据流程变得混乱，后期项目就不好维护了。

state可能有两个内部状态

1. activeIndex:当前选中对象的索引
2. prevIndex：前一次选中对象的索引

其中activeIndex作为state有两种视角：

1.在内部更新（智能组件）

2.在外部更新（木偶组件）

 

1.4.2   props

props是react用来让组件之间互相联系的一种机制。react的单项数据流，主要流动管道就是props。props本身是不可变的，组件的props一定来自于默认属性或者通过父组件传递而来。

这突然感觉陈屹讲的有点太饶了

下面是本人自己的理解（有错误，请务必在评论区留下大佬的足迹）

React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法

React中的组件：是为了解决html标签构建运用的不足

使用组件的好处：把公共的功能单独抽离成一个文件作为一个组件，哪里里使用哪里引入

父子组件：组件的相互调用中，我们把调用者称为父组件，被调用者称为子组件

父子组件传值

    父组件给子组件传值    

        1.父组件在调用子组件的时候 定义一个属性  如：

        2.子组件里面调用this.props.msg  获取父组件传过来的值

        说明：父组件不仅可以给子组件传值，还可以给子组件传方法,以及把整个父组件传给子组件

        

       defaultProps：父子组件传值中，如果父组件调用子组件的时候不给子组件传值，则可以在子组件中使用defaultProps定义的默认值

       propTypes：验证父组件传值的类型的合法性

       都是定义在子组件里面

 

     父组件获取子组件的数据

        1.父组件在调用子组件的时候指定ref的值  如：

        2.通过this.refs.header  获取整个子组件实例