react表单和绑定事件及state和props-04

第一种方式：在事件上使用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属性会导致组件的重新渲染。

写在最后：

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

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

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

1创建context对象

contextjs

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

3接收数据

方法一：使用类属性contextType

方法二：使用Consumer

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

初始化的时候Son很容易接受Dad的值 但是当 Dad赋值给Son A的值动态变化后,Son该如何将propsA传给stateA

其实问题的根本子组件和父都会修改 子组件本身的状态问题

react数据取完后,页面表示不正常再刷新能正常表示原因:1 组件render渲染了一个对象, 当state已确定更新但视图未更新

2 组件render渲染了一个列表, 当state改变视图更新异常

3 A和B子组件共用一个父组件state, 此时点击子组件A按钮更新了父组件state, 但是子组件B视图不更新

4 父子组件同时初始化, 子组件接收的值来自父组件异步获取的数据

5 调用方法中state更新了, 但实时拿到的值还是旧的

6 在redux中修改state页面未更新

你去好好看一下React组件生命周期这一部分。你可以在子组件添加一个componentWillRecieveProps周期，在里面获取到即将接收的props。如下： componentWillReceiveProps(nextProps) { thissetState({ A: nextPropsA }); }

React的生命周期从广义上分为三个阶段：挂载、渲染、卸载，因此可以把React的生命周期分为两类：挂载卸载过程和更新过程。

一、挂载卸载过程

1constructor，完成了React数据的初始化；

2componentWillMount，组件初始化数据后，但是还未渲染DOM前；

3componentDidMount，组件第一次渲染完成，此时dom节点已经生成；

4componentWillUnmount，组件的卸载和数据的销毁。

二、更新过程

1componentWillReceiveProps (nextProps)，父组件改变后的props需要重新渲染组件时；

2shouldComponentUpdate(nextProps,nextState)，主要用于性能优化(部分更新)，因为react父组件的重新渲染会导致其所有子组件的重新渲染，这个时候其实我们是不需要所有子组件都跟着重新渲染的，在这里return false可以阻止组件的更新；

3componentWillUpdate (nextProps,nextState)，shouldComponentUpdate返回true后，组件进入重新渲染的流程；

4componentDidUpdate(prevProps,prevState)，组件更新完毕后触发；

5render()，渲染时触发。

三、父子组件加载顺序

观察父子组件的挂载生命周期函数，可以发现挂载时，子组件的挂载钩子先被触发；卸载时，子组件的卸载钩子后被触发。

我们经常在挂载函数上注册监听器，说明此时是可以与页面交互的，也就是说其实所有挂载钩子都是在父组件实际挂载到dom树上才触发的，不过是在父组件挂载后依次触发子组件的 componentDidmount ，最后再触发自身的挂载钩子，说白了，componentDidMount 其实是异步钩子。

相反，卸载的时候父节点先被移除，再从上至下依次触发子组件的卸载钩子；

但是我们也经常在卸载钩子上卸载监听器，这说明 componentWillUnmount 其实在父组件从dom树上卸载前触发的，先触发自身的卸载钩子，但此时并未从dom树上剥离，然后依次尝试触发所有子组件的卸载钩子，最后，父组件从dom树上完成实际卸载。

以上就是关于react表单和绑定事件及state和props-04全部的内容，包括:react表单和绑定事件及state和props-04、React组件间通信、react父亲怎么获取子组件的state等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！