React组件间通信

在 Reactjs 中，数据是从上自下流动（传递）的，也就是一个父组件可以把它的 state / props 通过 props 传递给它的子组件，但是子组件不能修改 props - Reactjs 是单向数据流，如果子组件需要修改父组件状态（数据），是通过回调函数方式来完成的。

把数据添加子组件的属性中，然后子组件中从props属性中，获取父级传递过来的数据。

在父级中定义相关的数据 *** 作方法(或其他回调), 把该方法传递给子级，在子级中调用该方法父级传递消息。

1创建context对象

contextjs

2在父组件调用 Provider 传递数据

3接收数据

方法一：使用类属性contextType

方法二：使用Consumer

注意：在使用不熟练时，最好不要在项目中使用 context，context一般给第三方库使用

/src/component/Parentjs

/src/component/Childrenjs

/src/Appjs

运行项目：

子组件传值给父组件的步骤：

Parent:

Children:

子组件给父组件传一整个组件（父组件获取整个子组件）的步骤：

Parent:

Children:

在第三点获取到整个组件的前提上，再获取方法，所以不详细讲了。

比如如下代码：

父组件：

class Father extends Component {

construtor(props){

super(props);

thisstate={

name: 'Peter',

age: '26'

}

}

onChangeState(stateName){

thissetState(stateName)

}

render(){

<p>姓名：{thisstatename}</p>

<p>年龄：{thisstateage}</p>

<Child onClicked={thisonChangeStatebind(this)}/>

}

}

子组件：

class Child extends Component {

render(){

<Button onClicked={()=>thispropsonClicked({name: 'John'})}/>

}

}

平时我获取父组件 的props， 都是在子组件函数里  thispropsxxxx

父组件这样写

子组件这样写

这种情况，子组件在 componentDidMount 里面可以拿到 props，因为 父组件的值不是异步的。

然而，当父组的的值是异步，不如AJAX请求数据，子组件的componentDidMount 就获取不到 父组件的 props

父组件

子组件componentDidMount 里是拿不到 props

怎么解决这个问题呢， 这时候，componentWillReceiveProps 就显神威了，

看了生命周期，上面问题，用componentWillReceiveProps 

完美解决问题

下面介绍一个生命周期的定义：

1）componentWillMount(){}

在客户端和服务器上，在初始渲染发生之前立即调用一次 如果在这个方法中调用setState，

render（）将看到更新的状态，并且只会执行一次，尽管状态改变。

2)componentDidMount(){}

 调用一次，只在客户端（不在服务器上），在初始渲染发生后立即 子组件的componentDidMount（）方法在父组件的componentDidMount（）方法之前被调用 setTimeout  setInterval  AJAX 在此之行，强烈建议

3)componentWillReceiveProps(nextProps){}

 在组件接收新props时调用。初始渲染不调用此方法。老的props可以用thisprops  新值就用nextProps查看 在此函数中调用thissetState（）不会触发附加的渲染。

4)shouldComponentUpdate(nextProps, nextState){}

 当正在接收新的道具或状态时，在渲染之前调用。 此方法必须返回falseortrue否则报错true则渲染，false则不渲染！在此声明周期中可以考虑是否需要进行渲染！避免不必要的性能浪费// 如果shouldComponentUpdate返回false，那么render（）将被完全跳过，直到下一个状态改变。此外，不会调用componentWillUpdate和componentDidUpdate。 默认返回true// 如果性能是一个瓶颈，特别是有几十个或几百个组件，请使用shouldComponentUpdate来加快您的应用程序。returntrueorfalse

5) componentWillUpdate(nextProps, nextState){}

当正在接收新的props或state时立即调用。初始渲染不调用此方法// 您不能在此方法中使用thissetState（）。如果您需要更新state以响应prop更改，请改用componentWillReceiveProps。

6)componentDidUpdate(nextProps, nextState){}

在组件的更新刷新到DOM后立即调用。初始渲染不调用此方法。当组件已更新时，使用此 *** 作作为DOM *** 作的机会

7)componentWillUnmount(){}

 在组件从DOM卸载之前立即调用。在此方法中执行任何必要的清理，例如使计时器无效或清除在componentDidMount中创建的任何DOM元素。clearInterval or destroy

1react是一个用于构建用户UI的JS库。

2若要使用react创建项目，需全局安装：npm(cnpm) i -g create-react-app。

3react里面的交JSX，即javascript + xml。

4JSX里面的插入变量，需用{}，里面只支持表达式，不支持语句，例如（if else 则不能插入）

5创建一个react项目，命令：create-react-app 项目名。

6使用react，需在文件找中引入react(核心包)， react-dom(浏览器使用)。

7react-dom包含了一个render方法，用于渲染JSX。

1const Xabc = () => { return (<h1>hello world </h1>) } 在render中用帕斯卡命名方式引入，例:<Xabc/>   快捷键：rfc

2class Xabc extends ReactComponent { render() { return (<div>你好</div>) }  快捷键：rcc

3在react里面的JSX里，若是空元素，则推荐使用自闭合。

4每一个组件的最外层只有一个根元素，在react 16 之后，新增了一个Fragment组件，用于如果您不想生成一层新的空DOM，可使用Fragment，在react中引入{Fragment}

5thispropschildren 是一种特殊的props，表示组件的子元素，相当于Vue里面的solt

6如果是函数的方式创建的组件，想获取到props，需在函数的参数里面通过一个形参去获取。

7父组件向子组件传参，直接在子组件调用的地方写属性，除字符串以外，都用{}

1用class创建的组件，也叫类组件，只有类组件才有state,若是用箭头函数创建的组件，也叫无状态组件（stateless component）

2react里面的循环用数组的map实现。

3创建state,一种是：直接在class里面：state= {}

4第二种是constrcutor () {

        super();

thisstate = {}

}

1在react里面，修改state必须在thissetState里面去修改，否则不会反应到render()里面

2setState是异步的，若想获取最新的状态，需在setState中再传入一个回调函数，setState(val,[callback])，只有第二个参数才能获取到最新状态，第一个参数可以是一个对象，也可以是一个function，这个function的第一个参数是上一次的state的状态，必须return一个对象。

3对于react的方法

    1用箭头函数，this则指向react

    2在DOM上调用时，用bind(this)改this指向

    3不推荐在render里面改指向，可以在constrcutor里面用bind改this。

深度拷贝与浅度拷贝的区别主要在于有没有为拷贝出的新对象在堆中重新分配一块内存区域。浅度拷贝即直接赋值，拷贝的只是原始对象的引用地址，在堆中仍然共用一块内存。而深度拷贝为新对象在堆中重新分配一块内存，所以对新对象的 *** 作不会影响原始对象。

5lodash

_cloneDeep()

例如对一个input框进行聚焦事件

1引入{createRef}

2对需要的DOM 元素进行 *** 作

3创建

4执行（注意要加 current）

拷贝参考文档：>

以上就是关于React组件间通信全部的内容，包括:React组件间通信、React 子组件给父组件传值、整个组件、方法、react.js 父组件ajax获取数据，通过props传递到子组件，子组件应该怎么获取值等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！