React 知识点理解

React是一个JavaScript框架，使用jsx语法构建组件达到单页面应用目的。使用自己的react-dom树形结构来避免操作真实dom，React都能以最小的DOM修改来更新整个应用程序。

var child1 = React.createElement('li', null, 'First Text Content');

React 是什么？本身只一个前端框架，关注视图层，加入Redux才是数据层。

Rect特点？视图层，声明式操作，组件化，jsx，虚拟dom树。

调用setState的时候，会发生如下改变：

当调用 setState时，React会做的第一件事情是将传递给 setState的对象合并到组件的当前状态------------和解（reconciliation）

和解（reconciliation）的最终目标是以高效的方式，更新UI。

原因是，和解时React将构建一个新的 React元素树。React 会将这个新树与上一个元素树相比较（ diff算法 ）。

通过比较， React 能够相对精确地知道哪些位置发生了改变以及应该如何改变，这就保证了按需更新，而不是全部重新渲染。

在 React 当中 Element 和 Component 区别？

一个 React element 是一些 UI 的对象表示。描述了你想在屏幕上看到什么，例如无状态的组件。

一个 React Component 是一个函数或一个类，它可以接受输入并返回一个 React element 。

refs 

允许访问DOM元素或组件实例  (input)=>{this.inpput=input}

keys

keys帮助 React 跟踪哪些组件已更改、添加或从列表中删除。keys 是独一无二的。

在 React Diff 算法中 React 会借助元素的 Key 值来判断该元素是新创建的还是被移动而来的元素，从而减少不必要的元素重渲染。

受控组件( controlled component )与不受控制的组件( uncontrolled component )有什么区别

React 组件里面的很大一部分是受控组件，即组件负责控制和管理自己的状态。

受控组件是React控制的组件，也是表单数据的唯一来源。直观理解就是数据控制state。

如果我们有一个通过props设置value的input组件，它将持续显示props.value，即使你通过键盘输入字符。
换句话说，你的组件是只读的。

不受控制( uncontrolled component )的组件是您的表单数据由 DOM 处理。直观理解交给refs 处理。

虽然不受控制的组件通常更容易实现，因为您只需使用引用从DOM获取值，但是通常建议您通过不受控制的组件来支持受控组件。

用户的任何输入都将立即被反应在渲染元素上。
不受控制的组件保持其自身的内部状态。

主要原因是受控组件 支持即时字段验证 ，允许您有条件地禁用/启用按钮，强制输入格式，并且更多的是 " the React way "。

在哪个生命周期事件中你会发出 AJAX 请求，为什么？

AJAX 请求应该在 componentWillMount 生命周期事件中，组件挂载之前（在渲染前调用 render之前），那意味着你会试图在一个未安装的组件上设置setState，不会起作用。应该在 componentDidMount （在渲染后调用 render之后）中执行 AJAX 将保证至少有一个要更新的组件。

shouldComponentUpdate 用处，为什么它很重要？

shouldComponentUpdate 这个方法用来判断是否需要调用 render 方法重新描绘 dom。

主要就是判断那些组件将被重新渲染，在生命周期方法 shouldComponentUpdate 中，允许我们选择退出某些组件（和他们的子组件）的 reconciliation 过程。你可以理解新的react 元素树和上一个元素树比较，将没有改变的部分剔除。

最终目标是以最有效的方式，根据新的状态更新用户界面。

为什么要使用 React.Children.map（props.children，（）=>） 而不是 props.children.map（（）=>）

因为不能保证props.children将是一个数组。

<Parent>
  <h1>Welcome.</h1>
</Parent>

props.children 是一个对象，而不是一个数组。

React中事件的处理方式

为了解决跨浏览器兼容性问题，您的 React 中的事件处理程序将传递 合成事件（SyntheticEvent） ，有趣的是，React 实际上并没有将事件附加到子节点本身。React 将使用单个事件监听器监听顶层的所有事件。这对于性能是有好处的，这也意味着在更新DOM时，React 不需要担心跟踪事件监听器。

createElement 和 cloneElement 有什么区别？

React.createElement(
  type,
  [props],
  [...children]
)

React.cloneElement(
	element,
	props,
	[...children]
)

setState 的第二个参数是什么，它的目的是什么？

一个回调函数，当setState结束并re-rendered该组件时将被调用, setState 是异步的，这就是为什么它需要一个第二个回调函数。通常最好使用另一个生命周期方法，而不是依赖这个回调函数，但是很高兴知道它存在

react 生命周期函数

初始化阶段：

getDefaultProps:获取实例的默认属性

getInitialState:获取每个实例的初始化状态

com