内容来源于网络，仅为个人理解记忆方便

1，相关名词

1，事件委托

参考文档：我知道的 React 一些原理
通过将相同子元素的事件委托给父元素，简化操作
代码实例：

//未使用事件委托
<ul id="poem">
    <li>窗前明月光</li>
    <li>疑似地上霜</li>
    <li>举头望明月</li>
    <li>低头思故乡</li>
</ul>
<script>
    const liList = document.getElementsByTagName("li");
    for(let i=0;i<liList.length;i++){
        liList[i].addEventListener("click", function(e){
            console.log(e.target.innerHTML);
        })
    }
</script>
//使用了事件委托
const ul = document.getElementById("poem");
ul.addEventListener("click", function(e){
    console.log(e.target.innerHTML);
})

2，事件合成

在jsx中响应的事件并不是DOM的原生事件，而是react模拟原生DOM事件所有能力的一个自定义的事件对象（SyntheticEvent）.
目的:
1,跨浏览器执行，实现更好的跨平台。 2,避免立即回收，创建事件池，避免事件对象的频繁创建和回收，React事件对象不会被销毁掉，而是存放到事件池数组中，在事件触发时，再从数组中弹出。 3，方便事件的同意管理

//如下输出的e不是原生事件
addChange = (e)=>{ console.log(e); }
//如下输出的是原生事件
handleClick = (e) => console.log(e.nativeEvent);

1，合成事件与原生事件的区别

1，

合成事件命名采用小驼峰，而原生事件是全小写。

2，

3,setState

1,setState 为什么是异步的

如果setState是同步的，每次执行一次setState, 都会重新vnode diff + dom修改，影响性能，所以需要将多次的setState合并到一次。

2，什么是否setState是同步的

在setTimeout和原生事件中。

4，vdom的相关问题

1，对vdom的理解

我的理解

通过JavaScript对象来模拟真实的DOM结构，因为真实的DOM结构有几百个属性，而vdom的属性比这少很多，在执行diff算法时，可以减少很多计算，加快浏览器的渲染速度

标准

通过JavaScript对象来表示DOM结构；配合不同的渲染工具，可以实现跨平台；通过事务机制，将多次DOM修改的结果，一次性的更新到页面上，减少页面渲染的次数，减少重绘和重排的次数，提高页面性能。

在代码渲染到页面之前，react或者vue会将代码转化为vdom，以对象的形式来描述真实DOM结构，最终渲染到页面上。在每次数据修改前，vdom都会缓存一份，通过diff算法比较修改后的DOM和缓存的DOM。

2，vdom一定比真实DOM的性能好吗？

首次渲染时，由于多了一层vdom的计算，所以相应的要慢一点。

5，响应式与数据绑定

1，响应式

1，HTML5的响应式
屏幕尺寸的改变导致样式的变化。
2，数据的响应式数据的变化导致页面内容的变化。

2，数据绑定

数据绑定：将数据填充到标签中。

1，双向数据绑定

主要体现在用户输入域中：用户输入域影响数据的改变，数据的改变又影响页面内容的变化。
MVVM设计思想：把不同功能的代码放到不同的模块，通过特定的方式建立关联，就是把数据和视图（document)分开写，通过VM连接。

M：model(vue 中是data中的数据)
V：view(视图，是我们写的模板，本质上是document)
VM: View-Model(中介：提供逻辑将V与M结合在一起)
V -> M :用的是事件监听。
M -> V :用的是数据绑定。

6，对react框架的理解

render方法的返回值描述了我们希望在屏幕上看到的内容。更具体的说，render返回了一个react元素，这是对渲染内容的轻量级描述。

在jsx中可以任意使用JavaScript表达式，只需要用一个大括号把表达式括起来。每一个react元素事实上是一个JavaScript对象，可以在程序中将它保存在变量中或者作为参数传递。

在react应用中，数据通过props的传递，从父组件传递到子组件。

2, 基本语法

3, redux

redux是为了解决应用状态（state）管理而提出的一种解决方案。状态是什么：对于应用开发来讲，UI上显示的数据，控件的状态，登录状态等等都可以看作应用状态。
应用开发中最复杂的部分就在于状态的管理。
redux为了解决这个问题，提出了三个概念：Reducer, Action, Store.

1, 三个概念

1，Reducer

旧状态进入reducer经处理返回新状态。
可以将reducer想象为数据库中的表，store类比于数据库。
reducer是一个纯JavaScript函数，接收两个参数：第一个是之前的状态（store），第二个是一个可能携带数据的动作（action）。

export interface Reducer<T> {
  (state: T, action: Action): T;
}

2，Action

在redux规范中，所有的会引发状态更新的交互行为都必须通过一个显示定义的action来进行。

3，Store

可以将store看作一个数据库，是应用内的数据状态中心。store在redux中有一个基本原则：是一个唯一的，状态不可修改的树，状态的更新只能通过显示定义的action发送后触发。
store中一般负责：保存应用状态，提供访问状态的方法，派发action的方法以及对于状态订阅者的注册和取消。

EP15-zake学react