state和setState分析

在 react中 通过 state 以及 setState() 来控制组件内部数据的状态，其实也可以使用类似全局变量的方式在 constructor 里定义，但是全局变量的污染性都是知道的，所以 react 内部这种 state 和 setState 还是很优秀的数据驱动页面模式。

state

state 是 react 组件内部用来存储数据状态的，与 vue 中的 data 类似。但他们的更新机制差别很大， vue 中可以直接改变 data ， vue 内部的 watcher 机制会监听到这些数据的变化从而刷新页面，而 react 则是手动驱使 setState 去改变内部的 state ，从而使得页面刷新。

1state的作用

state 是 React 组件的一个对象， React 把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态，从而可以轻松让用户界面与数据保持一致。

React 中,更新组件的 state ,会导致重新渲染用户界面(不要 *** 作 DOM )简单来说,就是用户界面会随着 state 变化而变化

2state工作原理

常用的通知 React 数据变化的方法是调用 setState(data,callback) ，这个方法会合并 data 到 thisstate ，并重新渲染组件。渲染完成后,调用可选的 callback 回调。大部分情况不需要提供 callback ，因为 React 会自动把界面更新到最新状态。

setState()

与 vue 中不同的是 state 不能直接被修改，需要通过 setState() 的方法去修改。

1、 setState() 更新组件状态之后不会立即生效， react 为了提高性能会按批次更新 state 然后 render , 即异步 *** 作，所以同时写两个 setState 并不会触发两次，而是会合并处理。因此 setState() 之后立即去取 state 的值并不是更新之后的状态。

2、 setState() 第一个参数接受两种类型的参数， Object 以及 Function

当参数是 Object 的时候, 可以即为对应 state 中的 key , value 即是新的值。

Function

当参数是函数的时候， setState() 会将上一个 setState() 的结果作为参数传入这个函数

setState() 第二个参数是一个回调函数，表示 state 更新完成

看到这个回调函数，我们可以想象到很多场景，当页面更新完成后才进行的某些处理，将异步 *** 作变为同步，而这也可以和 await/async 结合使用

在 react 中更新页面是一个很复杂的 *** 作， vue 也是，全局更新和部分更新，目前感觉还没有哪种语言能非常智能的知道准确的要更新哪一部分内容，但是 react 的机制优秀的就在于 js *** 控的虚拟 dom ，即使是全局更新，也是很快速的更新。

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修改状态是不能直接修改的，需要使用setState来进行状态的修改，但是setState的使用会存在一些问题。觉得有必要在此做一下总结。。。。

就像这样：

类似于：

解决这个问题的方式：

setState的执行流程：

在 React 的 setState 函数实现中，会根据一个变量 isBatchingUpdates 判断是直接更新 thisstate 还是放到队列中回头再说，

而 isBatchingUpdates 默认是 false，也就表示 setState 会同步更新 thisstate，

但是，有一个函数 batchedUpdates，这个函数会把 isBatchingUpdates 修改为 true，

而当 React 在调用事件处理函数之前就会调用这个 batchedUpdates，造成的后果，就是由 React 控制的事件处理过程 setState 不会同步更新 thisstate。

React是根据isBatchingUpdates来合并更新的， 那么当调用setState的方法或者函数不是由React控制的话， setState自然就是同步更新了。

以上就是关于state和setState分析全部的内容，包括:state和setState分析、React基础、react的setState使用详解等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！