对Reactjs的认识

Vitrual DOM

在web开发中我们总需要将变化的数据实时反应到ui上，这时就需要对dom进行操作。
而复杂或频繁的DOM操作通常是性能瓶颈产生的原因（如何进行高性能的复杂DOM操作通常是衡量一个前端开发人员技能的重要指标）。
React为此引入了虚拟DOM(virtual DOM)的机制：在浏览器端用Javascript实现了一套DOM API.
基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前整个DOM树和上次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。
而且React能够批处理虚拟DOM的刷新，在一个事件循环(Event Loop)内的两次数据变化会被合并，例如你连续的先将节点内容从A变成B，然后又从B变成A,React会认为UI不发生任何变化，如果通过手动控制，这种逻辑通常是极其复杂的。
尽管每一次都需要构造完整的虚拟DOM树，但是因为虚拟DOM是内存数据，性能是极高的，而对实际DOM进行操作的仅仅是Diff部分，因而能达到提高性能的目的。

react是如何处理事件的？

react的事件是合成事件，内部原理非常复杂，我们这里只把关键性，可以用来解答这个问题的原理部分进行介绍即可。
jsx实际是函数提供的语法糖，那么这段jsx代码：

<buttont onClick = {this.handleClick}>
      Click me
</button>

会被转化为：

React.createElement("button",{
        onClick:this.handleClick
},"Click me")

react在组件加载和更新时，将事件通过统一注册到上，然后会有一个事件池存储了所有的事件，当事件触发的时候，通过进行事件分发。
所以可以简单的理解为，最终会作为一个回调函数调用。

setState相关

• 为什么要setState,而不是直接this.state.xx == oo;
  setState做的事情不仅仅只是修改了的值，另外最重要的是它会触发React的更新机制，会进行diff，然后将patch部分更新到真实dom里。如果直接的话，state的值确实会改，但是改了不会触发ui的更新，那就不是数据驱动了。
• setState是同步还是异步相关的问题

state的更新，react可能会把多个调用合并成一个调用。
因为 和 可能会异步更新，所以你不要依赖他们的值来更新下一个状态。
要解决这个问题，可以让接收一个函数而不是一个对象。

this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

使用React Fragments 避免额外标记

用户创建组件时，每个组件应具有单个父标签。父级不能有两个标签，所以顶部要有一个公共标签。这个额外标签除了充当组件的。因此，我们可以将元素包含在片段中。

export default class NestComponet extends React.Component{
render(){
  return (
    <>
      <h1>This is the Header component</h1>
      <h2>Welcome to demo page</h2>
    </>
    )
  }
}

上面的代码没有额外的标记，因此的工作量。