什么是react单向数据流

React遵循从上到下的数据流向，即单向数据流。

React是单向数据流，数据主要从父节点传递到子节点（通过props）。如果顶层（父级）的某个props改变了，React会重渲染所有的子节点。

单向数据流并非‘单向绑定’，甚至单向数据流与绑定没有‘任何关系’。对于React来说，单向数据流（从上到下）与单一数据源这两个原则，限定了React中要想在一个组件中更新另一个组件的状态（类似于Vue的平行组件传参，或者是子组件向父组件传递参数），需要进行状态提升。即将状态提升到他们最近的祖先组件中。子组件中Change了状态，触发父组件状态的变更，父组件状态的变更，影响到了另一个组件的显示（因为传递给另一个组件的状态变化了，这一点与Vue子组件的$emit()方法很相似）

前面讲过通过props子组件很容易就可以获取到父组件的数据，但是父组件怎么获取子组件的数据呢？通过查资料，发现可以通过自定义事件来实现父组件与子组件之间的通信。

首先，得创建一个子组件模板文件，子组件在父组件中用的时候，总得有个触发动作可以获取到子组件的数据吧，所以，加个按钮，触发个动作。如下所示：

Appvue

第一种方式：在事件上使用bind(this)

第二种方式：在构造函数中改变this指向

第三种方式：使用=()=>

JavaScript函数中的this不是在函数声明的时候定义的，而是在函数调用(即运行)的时候定义的。在react中也遵循这个原则，this指向该function的调用方，所以“调用者”不同会导致this的不同，这里的“调用者”指的是函数执行时的当前对象。

箭头函数或是bind会改变this的指向。上面的thisstate，之所以能够访问到state就是改变了this的指向，不然getData里的this就是指向这个function，这是的this是undefined。

一般来说：

    1、谁调用的this就指向谁。

    2、箭头函数，bind改变后的指向父层。

在react中我们使用setState来更新数据：

但是console打印出来的值是：原数据。

这里就要提到react里setState的异步了，在react里setState这个方法是异步的，不会按顺序执行，它可能会等待一组state一起进行更新，来提高性能。下面提供一个解决办法，setState的回调setState(updater[, callback])，相当于componentDidUpdate函数：

因为在事件中使用onClick={thissetData()}时方法直接执行，直接写成thissetData(data)这样会报错，所以需要使用bind():

下面看如何传递：

事件对象：在出发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。

给标签添加ref属性，在事件里通过thisrefs[属性]value来获取值

双向数据绑定在vue中有，在react中是没有的，双向数据绑定就是双方的数据改变相互影响，下面只是模拟双向数据绑定：

上面的的value需要事件监听，这里面有一个react的知识点： 约束性组件和非约束性组件 。

约束性组件，简单说就是react管理了它的value，而非约束性组件的value是由原生DOM管理的。

约束性组件是这样写的：

这里的value属性不再是一个写死的值，它是thisstatedata,而thisstatedata是由thisinputDataChange这个监听事件负责管理的。

这个时候实际上 input 的 value 根本不是用户输入的内容。而是onChange 事件触发之后，由 thissetState 导致了一次重新渲染。不过React会优化这个渲染过程，实际它依然是通过设置input的value来实现的。

非约束性组件是这样写的：

这个defaultValue就是原生DOM中的value属性，其value值就是用户输入的内容，react不管理输入的过程。

对比约束性组件和非约束性组件的输入流程：

约束性组件： 用户输入A -> 触发onChange事件 -> inputDataChange 中设置 statename = “A” -> 渲染input使他的value变成A

非约束性组件： 用户输入A -> input 中显示A

这里介绍form表单里的几种常用的子标签：

一般表单都是需要用form标签包起来：

1、react的组件从概念上看就是一个函数，可以接受一个参数最为输入值，这个参数就是props，可以把props理解为从外部传入组件内部的数据。

2、props经常被用作渲染组件和初始化状态，当一个组件被实例化之后，它的props是只读的，不可改变的。如果props在渲染过程中可以被改变，会导致这个组件显示的形态变得不可预测。只有通过父组件重新渲染的方式才可以把新的props传入组件中。

3、在组件中，我们最好为props中的参数设置一个defaultProps，并且制定它的类型。

一个组件的显示形态可以由数据状态和外部参数所决定，外部参数也就是props，而数据状态就是state

state的主要作用是用于组件保存、控制以及修改自己的状态，它只能在constructor中初始化，它算是组件的私有属性，不可通过外部访问和修改，只能通过组件内部的thissetState来修改，修改state属性会导致组件的重新渲染。

写在最后：

1、props传值基本类型，在父子组件中，数据都是响应式的。在子组件中改变props属性的值，不会影响父组件。父组件中的改变会影响子组件。

2、props传值引用类型（如对象），在父组件中，会对该对象的所有属性进行拦截，而在子组件中，只会拦截最上层的属性。所以如果在子组件中修改对象的属性，父组件中的值会更新。父组件中的改变同样会影响子组件。但是如果直接替换掉整个对象，则父组件中的数据不会发生改变，如果直接替换整个对象，vue会抛出错误Avoid mutating a prop directly

3、在父组件中改变对应的data,子组件中的值也会改变。之所以要在子组件中再对props的数据用watch进行监听，是需要在数据变化时做一些 *** 作。不如如果props中的值是在echarts中使用的话，数据改变不会自动刷新图表，所以需要监听，这样就知道什么去刷新图表。

在created函数调用之前，调用了initProps方法，该方法会遍历vm$optionspropsData对象，然后使用ObjectdefineProperty拦截所有的key。

第一步 两个关键的步骤，

1、拦截属性的get/set，调用 defineReactive$$1传了四个参数，所以才不会拦截对象的属性。详见第二步的方法。

2、使用proxy进行访问转接，所以我们能使用thisxx直接访问到this vm_propsxx

第二步

以上就是关于什么是react单向数据流全部的内容，包括:什么是react单向数据流、Vue入门之自定义事件$emit-父组件获取子组件的数据、react表单和绑定事件及state和props-04等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！