4-react 组件之间传值。

Posted 2020-12-09 taozhibin

1、传值：
都是使用props和state结合得方式进行组件之间得传值
再react中传值得话是父子组件之间得传值，一般会把父组件中得state值通过props传给子组件，再子组件中使用props进行接收
实现方法：
把父组件中得text状态通过props传给子组件，然后再子组件中使用props进行接收
react是一个单向数据流，换句话来说数据得流向是单向得，使用props只能让父组件给子组件传值，但是不能让子组件给父组件进行传值，只要是父组件中得状态值发生变化那么子组件就会重新渲染重新获取props属性值
父组件改变状态值执行顺序：
父组件得state改变之后，会引起父组件得重新渲染，再渲染过程中，那么子组件得text属性就会重新被赋值，子组件接收到父组件传过来得值得变化，那么就会引起重新渲染
再这种情况下形成从上而下得数据流，react是单向得数据流，“向”方向是向下得

2、把父组件得input中输入得内容作为传给子组件得值
再传值得时候，就只能传一个值吗？相传多少个就能传多少个

3、父组件给孙子组件传值
实现原理：借助中间组件Son组件，先让父组件给Son组件传值，然后Son组件再给grandSon传值

4、子组件给父组件传值：回调函数得方式进行传值得
原理：
再父组件中写一个函数（有参函数，参数得作用：为了接收子组件传过来值）  这个函数不是再父组件中调用得实在子组件中进行调用

 

5、使用回调函数进行父子组件传值：子组件给父组件传值
原理：
再父组件中设置一个有参函数，通过传值的方式把这个函数传给子组件，然后再子组件调用这个函数的同时，把需要的参数作为子组件传给父组件的值，然后这个参数是再父组件中进行接收和设置的
6、refs属性
refs是react中提供给我们访问DOM元素或者某个组件实例的一个属性
可以通过这个属性获取到当前需要获取的某一个组件实例或者是DOM元素
一般后边会跟一个回调函数，它会把我们需要的值返回到这个回调函数的第一个参数中

7、通过ref属性访问DOM元素
实现效果：单机登录按钮，把DOM中的input里边的value获取出来进行打印
想要获取哪个DOM节点或组件实例就给谁加上ref属性
只要是能找到当前的DOM元素或者是当前的组件实例，那么就可以及逆行任何操作，包括当前这个组件实例中的任意的一个状态和任意的一个方法都可以进行使用

8、获取ref属性的三种方法：
使用回调函数的方式，把返回值作为第一个参数（这个参数获取的就是当前的DOM或实例）
<Son ref={(son)=>this.son=son}/>
第二种：直接写使用refs进行获取：
<Son ref="son"/>
this.refs.son或this.refs[‘son‘]

9、context：
如果父组件给子组件传值得话使用得是props进行传值得，一旦组件得层级嵌套很深得话，使用props进行传值得这种方式就不合适了。react提供了一种context得传递数据得方式
context原理：context就相当于是一个全局变量，我们只需要将需要传递得数据放在这个变量中，不管组件树多么负责，嵌套有多深，子组件都可以从context中获取需要得值

10、实现context
父组件：
使用getChildContext方法来设置context，返回得就是一个context对象
使用childContextTypes来验证getChildContext返回得对象类型
子组件：
使用contextTypes来严重需要验证得context类型
直接通过this.context来获取想要获取得context的值即可

11、总结context传值的方式：

一个组件通过getChildContext方法返回一个context对象，这个对象就是子组件中需要获取的context对象，提供context组件的必须有childContextTypes作为对context的验证和声明
如果一个组件中设置了context，那么它的子组件可以随时获取context中设置的数据，这个context就相当于是一个全局变量。任意深度的子组件都可以获取到，但是都必须要通过ContextType啥的声明才悻悻，然后使用this.context进行获取

12、context好处：
context打破了常规的组件之间传值通过props的方式，极大的增加了组件之间的耦合性，并且就像使用全局变量一样，context里边的数据能被随意修改
再不适用第三方管理状态的话，再多个组件之间使用context能给我们带来很大的方便

 

总结：

组件之间的传值：
方法一：父组件给子组件传值：使用的是props
方法二：子组件给父组件传值：回调函数的方式
方法三：子组件给父组件传值：ref属性直接找到子组件获取子组件中的数据
方法四：父组件给更深层次的子组件传值：context
方法五：兄弟组件传值：son1先传值给父组件，然后父组件再传值给son2
方法六：兄弟组件传值：son1给父组件，父组件通过context传值给son2子组件