本文已参与[新人创作礼]活动，一起开启掘金创作之路。
持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第19天，点击查看活动详情juejin.cn/post/714765…
react是什么
react是用于构建用户界面的js框架，是一个将数据渲染为html视图的开源js库（主要操作Vdom呈现页面）
react的特点
- 声明式设计（可以轻松描述应用）
- 高效（使用虚拟DOM和diff算法，尽量减少与真实dom的交互）
- 灵活（可以与已知的库或框架有很好的配合）
- jsx（用于生成虚拟DOM，是js的语法扩展）
- 组件（通过react构建组件，使代码得到复用）
- 单向响应的数据流（父向子传递，比传统的数据绑定更简单）
- 在React Native中可以使用React语法进行移动端开发
学习react的原因
- 原生js操作dom繁琐，效率低
- 使用js直接操作dom，浏览器会进行大量的重排重绘。
- 原生js没有组件编码方案，代码复用率低。
react和其他框架相比的优点
- 组件的组合模式
- 单向数据流（好处就是数据传递路线更清晰，不容易出现错误，即使出现错误了也更容易定位错位）
- 高效的性能 （react实现原理：通过react抽象生出的一个对象：也就是轻量级的虚拟dom，通过它来操作真实dom，虚拟dom本质上就是一个对象。像操作一个对象一样。描述真实dom应该是什么样的，应该怎么呈现，有虚拟dom更新管理真实dom。由diff算法来提升虚拟dom转为真实dom的速度，提高效率）
- 分离的框架设计：react.js现在的版本已经将源码分开为reactDOM 和react.js。这就意味着react不仅仅能够在web端工作。甚至可以在服务端node.js和Native工作。
diff算法
用于将虚拟DOM转为真实DOM的。计算出虚拟DOM中真正变化的部分，并只针对该部分进行原生DOM操作，而非渲染整个页面，达到高效率。
三大策略：
- tree diff web UI中DOM节点跨层级的移动操作特别少，可以忽略不计。（在大多数统计的操作下操作，基本不会把这个东西拿到外面）
- component diff
拥有相同类的两个组件 生成相似的树形结构。（哪里变了改哪里）
拥有不同类的两个组件 生成不同的树形结构。（跟原来不一样的直接替换掉） - element diff
对于同一层级的一组子节点，通过key区分。（这个key是手动添加的，相当于一个id。作为它独一无二的标识。能快速的找到，如果不添加的话，对比的次数会增多效率也会变低。）
react应用范围
web端应用
原生应用：IOS Android安卓 Native移动端应用
node.js服务端渲染html。
react组件对象有四个属性
- state：控制组件更新的（数据内容的修改）状态。（state里面存储的其实就是从服务器拿到的数据，组件需要的数据，当数据发生变动时需要重新渲染）state只有类式组件才会有。因为state是组件实例对象中的，组件实例对象是由类生成的，所以只有在类式组件中才具有state属性
state的值必须是一个对象，默认值是null，它是组件实例对象继承react.component来的，所以要在当前组件的构造函数进行初始化。就是constructor，但是constructor可以省略，省略的话可以直接写state这个属性放在class内部顶层即可。
state的工作原理
react组件实现组件可交互所需的流程，render（）方法输出虚拟dom。虚拟dom转为dom。再在DOM上注册事件，事件触发setState（）修改数据，在每次调用setState方法时，react会自动执行render方法来更新虚拟dom，如果组件已经被渲染，那么还会更新到dom中去
在想要修改更新的时候调用setState方法即可。组件状态发生改变时，可以通过this.setState修改状态。setState方法支持按需修改，如state有两个字段，仅当setState传入的对象包含字段key才会修改属性，，每次调用setState会导致重新渲染调用render方法，直接修改state不会重渲染组件
setState的工作原理（如何修改其状态）？
常用的通知react数据变化的方法是调用setState（data,callback）,这个方法通过合并data到this.state，并重新渲染组件，渲染完成后，调用可选的callback回调。（组件更新完毕后调用的）
setState是同步还是异步？
在同步任务中，setState是异步的但是在异步任务中，setState是同步的，setState被设置成异步操作，是为了防止再多次大量修改状态时，长时间占用线程，其他任务无法发起，造成虚拟dom假死的问题，在异步任务中同步执行是因为本身setState就处在异步任务之中，不会影响其他任务。
2.props
props相对于组件来说是外来属性，使用props可以从组件外部向组件内部传值，类似于函数的传参，他经常用于组件之间的传值，一种父级向子级传递数据的方式。
对传入的props进行限制（限制数据类型，默认值，必填项）
3.context
一：封装一个公共的context文件
二：在父组件引入封装的context文件然后利用Provider将state传给后代组件
三：子组件或后代组件想要state值是引入封装的context文件。不需要state文件的只需写后代组件其余什么都不写
