序 --------- React简介
React相当于MVC里面的View层，它采用数据驱动视图的方式渲染界面，单向数据流，只能实现数据---->视图的单向绑定。请注意，他并不是一个框架，只是一个库。
一、浅谈react工作原理
Reactjs 起源于Facebook内部项目，是一个用来构建用户界面的 javascript 库，相当于MVC架构中的V层框架，与市面上其他框架不同的是，React 把每一个组件当成了一个状态机，组件内部通过state来维护组件状态的变化，当组件的状态发生变化时，React通过虚拟DOM技术来增量并且高效的更新真实DOM。本文将对React 的这些特点进行简单的介绍。
var HelloReact = React.createClass({
render:function(){
return (
<div>
Hello React!
</div>
)
}
});
// 使用HelloReact组件
ReactDOM.render(
<HelloReact />,
document.querySelector('body')
)
这样就定义了一个React组件，当然要运行这段代码是有条件的，需要引入React库，还需要引入JSX语法转换库，这里不多说了，这些基础的东西还需要各位亲自实践才好！
React 核心技术 —— 虚拟DOM（Virtual DOM）
在前端开发的过程中，我们经常会做的一件事就是将变化的数据实时更新到UI上，这时就需要对DOM进行更新和重新渲染，而频繁的DOM操作通常是性能瓶颈产生的原因之一，有时候我们会遇到这样一种尴尬的情况：比如有一个列表数据，当用户执行刷新操作时，Ajax会重新从后台请求数据，即使新请求的数据和上次完全相同，DOM也会被全部更新一遍并进行重新渲染，这样就产生了不必要的性能开销。
React为此引入了虚拟DOM（Virtual DOM）机制：对于每一个组件，React会在内存中构建一个相对应的DOM树，基于React开发时所有的DOM构造都是通过虚拟DOM进行，每当组件的状态发生变化时，React都会重新构建整个DOM数据，然后将当前的整个DOM树和上一次的DOM树进行对比，得出DOM结构变化的部分(Patchs)，然后将这些Patchs 再更新到真实DOM中。整个过程都是在内存中进行，因此是非常高效的。借用一张图可以清晰的表示虚拟DOM的工作机制：
React 生命周期
React 把每个组件都当作一个状态机来维护和管理，因此每个组件都拥有一套完整的生命周期，大致可以分为三个过程：初始化、更新和销毁。生命周期的每一个过程都明确的反映了组件的状态变化。对于开发来说就能很容易的把握组件的每个状态，不同的状态时期做对应的事情，互不干扰。以下是和组件生命周期相关的几个方法：
getDefaultProps //创建组建
getInitialState //实例化状态
componentWillMount //挂载前
componentDidMount //挂载后
componentWillReceiveProps //属性被改变时
shouldComponentUpdate //是否更新
componentWillUpdate //更新前
componentDidUpdate //更新后
componentWillUnmount //销毁前
初始化
对于外部系统来说，组件是一个独立存在的封闭系统，内部的逻辑被隐藏，只对外暴露传递数据的接口，而React为我们提供了两种方式来向组件传递数据，即 props 和 state。
props 是在调用 ReactDOM.render() 时通过标签属性xxx传递，然后通过 this.props.xxx 来获取，getDefaultProps 允许你为组件设置一个默认的props值，在没有传递props的情况下显示默认值。
// 创建HelloReact组件
var HelloReact = React.createClass({
/**
* 当设置props的默认值 当没有传递时显示默认值
* @return {}
*/
getDefaultProps:function(){
return {
data:"暂无数据"
}
},
render:function(){
return (
<div>
//显示data，当props发生变化时会自动更新
{this.props.data}
</div>
)
}
});//传递props属性data
ReactDOM.render(
<HelloReact data={"Hello React!"} />,
document.querySelector('body')
)
和 props 不同的是，state不能通过外部传递，因此在使用state之前，需要在 getInitialState 中为state设置一个默认值，然后才能通过 this.state.xxx 来访问，当组件被挂载完成时，触发 componentDidMount 方法，我们可以在这里通过Ajax请求服务器数据，然后再通过 setState() 把state的值设置为真实数据。
// 创建HelloReact组件
var HelloReact = React.createClass({
/**
* 设置组件的初始值
* @returns {{data: Array, msg: string}}
*/
getInitialState:function(){
return {
data:"数据加载中..." //初始值为[]
}
},
/**
* 挂载后首次加载数据
*/
componentDidMount:function(){
this.requestData();//请求数据
},
/**
* 请求后台数据
*/
requestData:function(){
$.ajax({
url:'xxxx.ashx',
data:{},
success:function(data){
this.setState({
data:data //通过setState()更新服务器数据
})
}
}.bind(this))
},
render:function(){
return (
<div>
{this.state.data}
</div>
)
}
});
ReactDOM.render(
<HelloReact />,
document.querySelector('body')
)
更新
props属性是只读的，如果想要改变props的值，只能通过重新调用render()来传递新的props，但要注意的是，重新执行render()组件不会被重新挂载，而是通过虚拟DOM技术进行增量更新和渲染，这时还会触发 componentWillReceiveProps 方法，并将新的props作为参数传递，你可以在这里对新的props进行处理。
相比props，state天生就是用来反映组件状态的，因此它的值是可以被改变的，当state的值被改变时，通过setState就可以改变state的值，React同样也是采用虚拟DOM技术来计算需要被更新的部分，而不是牵一发动全身的更新和渲染。
当 props 和 state 的状态发生变化后，组件在即将更新之前还会触发一个叫 shouldConponentUpdate 的方法，如果 shouldConponentUpdate 返回的是 true，不管props和state 的值和上一次相比有没有变化，React 都会老老实实的进行对比。此时，如果你确定以及肯定两次数据没有变化，那就让 shouldConponentUpdate 返回 false，React就不会进行diff了，更不会重新渲染了。瞬间省去了diff的时间。
销毁
当组件从DOM中被移除时，React会销毁之。在销毁之前，细心的React还触发 componentWillUnmount 来通知你，看你最后有没有什么话想对这个即将销毁的组件说，当然你没什么事就不用了。
什么时候用props,什么时候用state
我们已经知道可以通过props和state两种方式向组件传递数据，props是只读的不能被改变，而 state 是用来反映一个组件的状态，是可以改变的。因此，当组件所需要的数据在调用时是已经确定的，不频繁发生变化的，就可以使用props来传递，相反，当组件所需要的数据在调用时不能确定，需要等待异步回调时才能确定，比如ajax请求数据，input的onchange事件，这时就需要使用state来记录和改变这些值得变化。
二、 state和props的区别
在任何应用中，数据都是必不可少的。我们需要直接的改变页面上一块的区域来使得视图的刷新，或者间接地改变其他地方的数据。React的数据是自顶向下单向流动的，即从父组件到子组件中，组件的数据存储在props和state中，这两个属性有啥子区别呢？
组件从概念上看就是一个函数，可以接受一个参数作为输入值，这个参数就是props，所以可以把props理解为从外部传入组件内部的数据。由于React是单向数据流，所以props基本上也就是从服父级组件向子组件传递的数据（其实子组件也可以向父组件传递参数）。
子组件向父组件传递参数方法：
<body>
<div id="test"></div>
</body>
//子组件
var Child = React.createClass({
render: function(){
return (
<div>
邮箱：<input onChange={this.props.handleEmail}/>
</div>
)
}
});
//父组件
var Parent = React.createClass({
getInitialState: function(){
return {
email: ''
}
},
handleEmail: function(event){
this.setState({email: event.target.value});
},
render: function(){
return (
<div>
<div>邮箱：{this.state.email}</div>
<Child name="email" handleEmail={this.handleEmail.bind(this)}/>
</div>
)
}
});
React.render(
<Parent />,
document.getElementById('test')
);
原理：
依赖 props 来传递事件的引用，并通过回调的方式来实现的，这样实现不是特别好，但在没有任何工具的情况下是一种简单的实现方式。
分析：
React中当state发生改变时，组件才会update。在父组件中设定state的初始值以及处理该state的函数，同时将函数名通过以props属性值的形式传入子组件，子组件通过调用父组件的函数，进而引起state变化，达到在父组件中展示子组件产生的变化。
三、 super的用法
说起 ES6 的继承和 super 的用法大家都不会陌生，可是一问到 super 到底是什么，很多人就支支吾吾。也许在别的编程语言中 super 和 this 一样，都是一个指针，可以像一般变量一样使用。但是在 ES6 中，super 是一个特殊的语法，而且它比 this 还要特殊，有很多用法上的限制。
第一，既然 super 是一个可以调用的东西，它是一个函数么？
第二，对于 extends 的 class，constructor 里可以没有 super 么？
第一个问题的答案很容易找到，可以把 super 赋值到其它变量试试，会得到一个语法错误。
class A extends Object {
constructor() {
const a = super;
a();
}
};
Uncaught SyntaxError: 'super' keyword unexpected here
因为 super 的词法定义是伴随后面那对括号的，它和 this 不同。this 的定义是 this 这个关键字会被替换成一个引用，而 super 则是 super(…) 被替换成一个调用。而且 super 除了在 constructor 里直接调用外还可以使用 super.xxx(…) 来调用父类上的某个原型方法，这同样是一种限定语法。
class A extends Array {
push(...args) {
args.forEach(item => super.push(item + 1));
}
}
let a = new A();
a.push(1, 2, 3)
console.log(a); // [2, 3, 4]
所以要是问 super 是什么，它只是一个关键字而已。用法应该是 super(…) 或者 super.xxx(…) 才对。
第二个问题实际上是问 super(…) 到底做了什么。其实 super(…) 做的事情就是生成一个 this。因为在原型继承中，如果一个类要继承自另一个类，那就得先实例化一次它的父类作为作为子类的原型。如果不做这件事，子类的原型就不能确定，当然也就无法创建 this。所以如果在 constructor 中没有 super(…) 就企图获取 this 就会报错。
Uncaught ReferenceError: this is not defined
class A {}
class B extends A {
constructor() {}
}
new B(); // throw
其实 constructor 中是可以没有 super(…) 的，它只不过是用来生成 this 的而已。如果只想继承原型，而根本不想管父类的构造器，可以完全避开 this，在 constructor 中手动返回一个对象，比如：·
class A {
get one() { return 1; }
}
class B extends A {
constructor() {
return Object.create(new.target.prototype);
}
get two() { return 2; }
};
let b = new B();
console.log(b.one, b.two); // 1 2
四、何为JSX
Jsx是javascript语法的一种扩展，并拥有 JavaScript 的全部功能。JSX生产React元素，你可以将任何的 JavaScript 表达式封装在花括号里，然后将其嵌入到JSX中。在编译完成之后，JSX 表达式就变成了常规的 JavaScript 对象。
React.render(
<h1 color="red">Hello, world!</h1>,
document.getElementById('example')
);
编译后：
React.render( React.createElement("h1", {color: "red"}, "Hello, world!"), document.getElementById('example') );
其中最关键的部分就是 html 代码被转换成了 React.createElement。这就是JSX的基本原理，他会自动识别html代码，并且全部转换成 React.createElement，于是编译出来的就是原生的JS代码。
JSX区分html代码的方式就是： 前括号之内并且首字母小写的就是html代码。如果首字母大写则就是react组件。
JSX会有详细的语法检查，如果你的标签未闭合会直接报错。而不像浏览器中可能会自动修复或者直接乱掉。
因为JSX是兼容JS语法的，所以在html中如果有JS关键字就不要写，比如 class 要用 className 来代替。for 要用 htmlFor 来代替。
五、什么是纯函数
一个纯函数是一个不依赖于且不改变其作用域之外的变量状态的函数，这也意味着一个纯函数对于同样的参数总是返回同样的结果。
//纯函数
function simple(a,b) {
return a+b;
}
//非纯函数，改变了作用域外的变量
var a = {a:1}
function unsimple(a,b){
a.a = 2;
return a+b;
}
六、shouldComponentUpdate是做什么的（性能优化的周期函数）
shouldComponentUpdate 这个方法用来判断是否需要调用 render 方法重新描绘 dom。因为 dom 的描绘非常消耗性能，如果我们能在 shouldComponentUpdate 方法中能够写出更优化的 dom diff 算法，可以极大的提高性能。
七、为什么虚拟DOM会提高性能
虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操作，从而提高性能。
用JavaScript对象结构表示DOM树的结构；然后用这个树构建一个真正的DOM树，插到文档当中当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异把 2 所记录的差异应用到步骤 1 所构建的真正的 DOM 树上，视图就更新了。虚拟dom是在内存中的。
八、如何理解setState
在 React 文档的 State and Lifecycle 一章中，其实有明确的说明 setState() 的用法，向 setState() 中传入一个对象来对已有的 state 进行更新。
//setstate函数
void setState (
function|object nextState,
[function callback]
)
比如现在有下面的这样一段代码：
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
count: this.state.count + 1
};
}
}
我们如果想要对这个 state 进行更新的话，就可以这样使用 setState()：
this.setState({
count: 1
});
你可能不知道的
最基本的用法世人皆知，但是，在 React 的文档下面，还写着，处理关于异步更新 state 的问题的时候，就不能简单地传入对象来进行更新了。这个时候，需要采用另外一种方式来对 state 进行更新。
setState() 不仅能够接受一个对象作为参数，还能够接受一个函数作为参数。函数的参数即为 state 的前一个状态以及 props。
所以，我们可以向下面这样来更新 state：
this.setState((prevState, props) => ({ count: prevState.count + 1 }));
这样写的话，能够达到同样的效果。那么，他们之间有什么区别呢？
区别
我们来详细探讨一下为什么会有两种设置 state 的方案，他们之间有什么区别，我们应该在何时使用何种方案来更新我们的 state 才是最好的。
此处，为了能够明确的看出 state 的更新，我们采用一个比较简单的例子来进行说明。
我们设置一个累加器，在 state 上设置一个 count 属性，同时，为其增加一个 increment 方法，通过这个 increment 方法来更新 count。
此处，我们采用给 setState() 传入对象的方式来更新 state，同时，我们在此处设置每调用一次 increment 方法的时候，就调用两次 setState()。具体的原因我们在后文中会讲解。
具体的代码如下：
class IncrementByObject extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
this.increment = this.increment.bind(this);
}
// 此处设置调用两次 setState()
increment() {
this.setState({
count: this.state.count + 1
});
this.setState({
count: this.state.count + 1
});
}
render() {
return (
<div>
<button onClick={this.increment}>IncrementByObject</button>
<span>{this.state.count}</span>
</div>
);
}
}
ReactDOM.render(
<IncrementByObject />,
document.getElementById('root')
);
这时候，我们点击 button 的时候，count 就会更新了。但是，可能与我们所预期的有所差别。我们设置了点击一次就调用两次 setState()，但是，count 每一次却还是只增加了 1，所以这是为什么呢？
其实，在 React 内部，对于这种情况，采用的是对象合并的操作，就和我们所熟知的 Object.assign() 执行的结果一样。
比如，我们有以下的代码：
Object.assign({}, { a: 2, b: 3 }, { a: 1, c: 4 });
那么，我们最终得到的结果将会是 { a: 1, b: 3, c: 4 }。对象合并的操作，属性值将会以最后设置的属性的值为准，如果发现之前存在相同的属性，那么，这个属性将会被后设置的属性所替换。所以，也就不难理解为什么我们调用了两次 setState() 之后，count 依然只增加了 1 了。
用简短的代码说明就是这样：
this.setState({
count: this.state.count + 1
});
// 同理于
Object.assign({}, this.state, { count: this.state.count + 1 });
以上是我们采用对象的方式传入 setState() 来更新 state 的说明。接下来我们再看看使用函数的方式来更新 state 会有怎么样的效果呢？
我们将上面的累加器采用另外的方式来实现一次，在 setState() 的时候，我们采用传入一个函数的方式来更新我们的 state。
class IncrementByFunction extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
this.increment = this.increment.bind(this);
}
increment() {
// 采用传入函数的方式来更新 state
this.setState((prevState, props) => ({
count: prevState.count + 1
}));
this.setState((prevState, props) => ({
count: prevState.count + 1
}));
}
render() {
return (
<div>
<button onClick={this.increment}>IncrementByFunction</button>
<span>{this.state.count}</span>
</div>
);
}
}
ReactDOM.render(
<IncrementByFunction />,
document.getElementById('root')
);
当我们再次点击按钮的时候，就会发现，我们的累加器就会每次增加 2 了。
我们可以通过查看 React 的源代码来找出这两种更新 state 的区别 (此处只展示通过传入函数进行更新的方式的部分源码)。
在 React 的源代码中，我们可以看到这样一句代码：
this.updater.enqueueSetState(this, partialState, callback, 'setState');
然后，enqueueSetState 函数中又会有这样的实现：
queue.push(partialState);
enqueueUpdate(internalInstance);
所以，与传入对象更新 state 的方式不同，我们传入函数来更新 state 的时候，React 会把我们更新 state 的函数加入到一个队列里面，然后，按照函数的顺序依次调用。同时，为每个函数传入 state 的前一个状态，这样，就能更合理的来更新我们的 state 了。
问题所在
那么，这就是传入对象来更新 state 会导致的问题吗？当然，这只是问题之一，还不是主要的问题。
我们之前也说过，我们在处理异步更新的时候，需要用到传入函数的方式来更新我们的 state。这样，在更新下一个 state 的时候，我们能够正确的获取到之前的 state，并在在其基础之上进行相应的修改。而不是简单地执行所谓的对象合并。
所以说，我们建议，在使用 setState 的时候，采用传入函数来更新 state 的方式，这样也是一个更合理的方式。
React中setState的更新策略
React中的setState有Batch模式(批量更新模式)和普通模式。
普通模式下,setState能够即时更新state，重新调用 render 方法，然后把render方法所渲染的最新的内容显示到页面上。
Batch模式下,React不会立刻修改state。而是把这个对象放到一个更新队列中，稍后才会从队列中把新的状态提取出来合并到 state中，然后再触发组件更新。
1.由 React 控制的事件处理过程 setState 不会同步更新 this.state。如我们使用React库中的表单组件，例如 select、input、button等，它都是处于React库的控制之下，因此setState会以异步的方式执行。
2.React 控制之外的情况， setState 会同步更新 this.state。通过JavaScript原生addEventListener直接添加的事件处理函数，使用setTimeout/setInterval 等setState会以同步的方式执行。
enqueueUpdate 的作用是判断 batchingStrategy.isBatchingUpdates 如果是 true，则对所有队列中的更新执行 batchUpdates 方法，否则只把当前组件（调用了 setState 的组件）放入 dirtyComponents 数组中。
enqueueUpdate 源码：
function enqueueUpdate(component){
ensureInjected();
// 如果不是批量更新模式
if (!batchingStrategy.isBatchingUpdates){
batchingStrategy.batchingUpdates(enqueueUpdate, component);
return ;
}
// 如果处于批量更新模式 则将该组件保存在 dirtyComponents 中
dirtyComponents.push(component)
}
batchingStrategy 只是定义了一个 Boolean 类型的变量 isBatchingUpdates 和 一个 batchedUpdates 方法：
var ReactDefaultBatchingStrategy = {
isBatchingUpdates: false,
batchedUpdates: function(callback, a, b, c, d, e) {
var alreadyBatchingUpdates = ReactDefaultBatchingStrategy.isBatchingUpdates;
ReactDefaultBatchingStrategy.isBatchingUpdates = true;
if (alreadyBatchingUpdates) {
callback(a, b, c, d, e);
} else {
// transaction.perform 涉及一个事务的概念
transaction.perform(callback, null, a, b, c, d, e);
}
},
}
解决异步更新
需要state状态同步更新或state状态改变后去处理逻辑。
使用setTimeout或setInterval
componentDidMount(){
setTimeout(() => {
this.setState({
value: this.state.value + 1
})
console.log('value', this.state.value)
}, 0)
}
使用setState的回调函数
this.setState({
value: this.state.value + 1
}, () => {
console.log('value', this.state.value) // 更新后的state
})
一个经典的问题
在一个组件的 componentDidMount 中继续四次 setState（this.state.val 已经初始化为 0）：
componentDidMount(){
this.setState({val: this.state.val + 1});
console.log(this.state.val); // 第 1 次输出
this.setState({val: this.state.val + 1});
console.log(this.state.val); // 第 2 次输出
setTimeout(() => {
this.setState({val: this.state.val + 1});
console.log(this.state.val); // 第 3 次输出
this.setState({val: this.state.val + 1});
console.log(this.state.val); // 第 4 次输出
}, 0);
}
正确答案是： 0 0 2 3
究其原因还是 调用栈 及 事务 的原因：
在 componentDidMount 中直接调用的两次 setState，调用栈比较复杂，在这之前 batchingStrategy 的 isBatchingUpdates 已经被设为 true， 所以两次 setState 没有立即生效，而是放进了 dirtyComponents 中，因此两个 console 都是 0.
在 setTimeout 中的两次 setState，因为没有前置的 batchUpdate 的调用，所以 batchingStrategy 的 isbatchingUpdates 标志位是 false，也导致了 state 的马上生效。
解读为什么直接修改this.state无效
要知道setState本质是通过一个队列机制实现state更新的。 执行setState时，会将需要更新的state合并后放入状态队列，而不会立刻更新state，队列机制可以批量更新state。
如果不通过setState而直接修改this.state，那么这个state不会放入状态队列中，下次调用setState时对状态队列进行合并时，会忽略之前直接被修改的state，这样我们就无法合并了，而且实际也没有把你想要的state更新上去。
九、react diff算法
diff算法作为Virtual DOM的加速器，其算法的改进优化是React整个界面渲染的基础和性能的保障，同时也是React源码中最神秘的，最不可思议的部分
1.传统diff算法
计算一棵树形结构转换为另一棵树形结构需要最少步骤，如果使用传统的diff算法通过循环递归遍历节点进行对比，其复杂度要达到O(n^3)，其中n是节点总数，效率十分低下，假设我们要展示1000个节点，那么我们就要依次执行上十亿次的比较。
下面附上一则简单的传统diff算法：
let result = [];
// 比较叶子节点
const diffLeafs = function (beforeLeaf, afterLeaf) {
// 获取较大节点树的长度
let count = Math.max(beforeLeaf.children.length, afterLeaf.children.length);
// 循环遍历
for (let i = 0; i < count; i++) {
const beforeTag = beforeLeaf.children[i];
const afterTag = afterLeaf.children[i];
// 添加 afterTag 节点
if (beforeTag === undefined) {
result.push({ type: "add", element: afterTag });
// 删除 beforeTag 节点
} else if (afterTag === undefined) {
result.push({ type: "remove", element: beforeTag });
// 节点名改变时，删除 beforeTag 节点，添加 afterTag 节点
} else if (beforeTag.tagName !== afterTag.tagName) {
result.push({ type: "remove", element: beforeTag });
result.push({ type: "add", element: afterTag });
// 节点不变而内容改变时，改变节点
} else if (beforeTag.innerHTML !== afterTag.innerHTML) {
if (beforeTag.children.length === 0) {
result.push({
type: "changed",
beforeElement: beforeTag,
afterElement: afterTag,
html: afterTag.innerHTML
});
} else {
// 递归比较
diffLeafs(beforeTag, afterTag);
}
}
}
return result;
}
2.react diff算法
diff策略
下面介绍一下react diff算法的3个策略
Web UI 中DOM节点跨层级的移动操作特别少，可以忽略不计
拥有相同类的两个组件将会生成相似的树形结构，拥有不同类的两个组件将会生成不同的树形结构。
对于同一层级的一组子节点，它们可以通过唯一id进行区分。
对于以上三个策略，react分别对tree diff,component diff,element diff进行算法优化。
tree diff
基于策略一，WebUI中DOM节点跨层级的移动操作少的可以忽略不计，React对Virtual DOM树进行层级控制，只会对相同层级的DOM节点进行比较，即同一个父元素下的所有子节点，当发现节点已经不存在了，则会删除掉该节点下所有的子节点，不会再进行比较。这样只需要对DOM树进行一次遍历，就可以完成整个树的比较。复杂度变为O(n);
疑问：当我们的DOM节点进行跨层级操作时，diff会有怎么样的表现呢？
如下图所示，A节点及其子节点被整个移动到D节点下面去，由于React只会简单的考虑同级节点的位置变换，而对于不同层级的节点，只有创建和删除操作，所以当根节点发现A节点消失了，就会删除A节点及其子节点，当D发现多了一个子节点A，就会创建新的A作为其子节点。
此时，diff的执行情况是：
createA-->createB-->createC-->deleteA
由此可以发现，当出现节点跨层级移动时，并不会出现想象中的移动操作，而是会进行删除，重新创建的动作，这是一种很影响React性能的操作。因此官方也不建议进行DOM节点跨层级的操作。
componnet diff
React是基于组件构建应用的，对于组件间的比较所采用的策略也是非常简洁和高效的。
- 如果是同一个类型的组件，则按照原策略进行Virtual DOM比较。
- 如果不是同一类型的组件，则将其判断为dirty component，从而替换整个组价下的所有子节点。
- 如果是同一个类型的组件，有可能经过一轮Virtual DOM比较下来，并没有发生变化。如果我们能够提前确切知道这一点，那么就可以省下大量的diff运算时间。因此，React允许用户通过shouldComponentUpdate()来判断该组件是否需要进行diff算法分析。
如下图所示，当组件D变为组件G时，即使这两个组件结构相似，一旦React判断D和G是不用类型的组件，就不会比较两者的结构，而是直接删除组件D，重新创建组件G及其子节点。虽然当两个组件是不同类型但结构相似时，进行diff算法分析会影响性能，但是毕竟不同类型的组件存在相似DOM树的情况在实际开发过程中很少出现，因此这种极端因素很难在实际开发过程中造成重大影响。
element diff
当节点属于同一层级时，diff提供了3种节点操作，分别为INSERT_MARKUP(插入)，MOVE_EXISTING(移动),REMOVE_NODE(删除)。
INSERT_MARKUP:新的组件类型不在旧集合中，即全新的节点，需要对新节点进行插入操作。
MOVE_EXISTING:旧集合中有新组件类型，且element是可更新的类型，这时候就需要做移动操作，可以复用以前的DOM节点。
REMOVE_NODE:旧组件类型，在新集合里也有，但对应的element不同则不能直接复用和更新，需要执行删除操作，或者旧组件不在新集合里的，也需要执行删除操作。
Element DIFF紧接着以上统一类型组件继续比较下去，常见类型就是列表。同一个列表由旧变新有三种行为，插入、移动和删除，它的比较策略是对于每一个列表指定key，先将所有列表遍历一遍，确定要新增和删除的，再确定需要移动的。如图所示，第一步将D删掉，第二步增加E，再次执行时A和B只需要移动位置即可。
十、react生命周期
第一个是组件初始化(initialization)阶段
也就是以下代码中类的构造方法( constructor() ),Test类继承了react Component这个基类，也就继承这个react的基类，才能有render(),生命周期等方法可以使用，这也说明为什么函数组件不能使用这些方法的原因。
super(props)用来调用基类的构造方法( constructor() ), 也将父组件的props注入给子组件，功子组件读取(组件中props只读不可变，state可变)。
而constructor()用来做一些组件的初始化工作，如定义this.state的初始内容。
import React, { Component } from 'react';
class Test extends Component {
constructor(props) {
super(props);
}
}
第二个是组件的挂载(Mounting)阶段
此阶段分为componentWillMount，render，componentDidMount三个时期。
-
componentWillMount:
在组件挂载到DOM前调用，且只会被调用一次，在这边调用this.setState不会引起组件重新渲染，也可以把写在这边的内容提前到constructor()中，所以项目中很少用。 -
render:
根据组件的props和state（无论两者的重传递和重赋值，值是否有变化，都可以引起组件重新render） ，return 一个React元素（描述组件，即UI），不负责组件实际渲染工作，之后由React自身根据此元素去渲染出页面DOM。render是纯函数（Pure function：函数的返回结果只依赖于它的参数；函数执行过程里面没有副作用），不能在里面执行this.setState，会有改变组件状态的副作用。 -
componentDidMount:
组件挂载到DOM后调用，且只会被调用一次
第三个是组件的更新(update)阶段
在讲述此阶段前需要先明确下react组件更新机制。setState引起的state更新或父组件重新render引起的props更新，更新后的state和props相对之前无论是否有变化，都将引起子组件的重新render。
造成组件更新有两类（三种）情况：
1.父组件重新render
父组件重新render引起子组件重新render的情况有两种
a. 直接使用,每当父组件重新render导致的重传props，子组件将直接跟着重新渲染，无论props是否有变化。可通过shouldComponentUpdate方法优化。
class Child extends Component {
shouldComponentUpdate(nextProps){ // 应该使用这个方法，否则无论props是否有变化都将会导致组件跟着重新渲染
if(nextProps.someThings === this.props.someThings){
return false
}
}
render() {
return <div>{this.props.someThings}</div>
}
}
b. 在componentWillReceiveProps方法中，将props转换成自己的state
class Child extends Component {
constructor(props) {
super(props);
this.state = {
someThings: props.someThings
};
}
componentWillReceiveProps(nextProps) { // 父组件重传props时就会调用这个方法
this.setState({someThings: nextProps.someThings});
}
render() {
return <div>{this.state.someThings}</div>
}
}
根据官网的描述：
在该函数(componentWillReceiveProps)中调用 this.setState() 将不会引起第二次渲染。
是因为componentWillReceiveProps中判断props是否变化了，若变化了，this.setState将引起state变化，从而引起render，此时就没必要再做第二次因重传props引起的render了，不然重复做一样的渲染了。
2.组件本身调用setState，无论state有没有变化。可通过shouldComponentUpdate方法优化。
class Child extends Component {
constructor(props) {
super(props);
this.state = {
someThings:1
}
}
shouldComponentUpdate(nextStates){ // 应该使用这个方法，否则无论state是否有变化都将会导致组件重新渲染
if(nextStates.someThings === this.state.someThings){
return false
}
}
handleClick = () => { // 虽然调用了setState ，但state并无变化
const preSomeThings = this.state.someThings
this.setState({
someThings: preSomeThings
})
}
render() {
return <div onClick = {this.handleClick}>{this.state.someThings}</div>
}
}
此阶段分为:
componentWillReceiveProps，
shouldComponentUpdate，
componentWillUpdate，
render，
componentDidUpdate
-
componentWillReceiveProps(nextProps)
此方法只调用于props引起的组件更新过程中，参数nextProps是父组件传给当前组件的新props。但父组件render方法的调用不能保证重传给当前组件的props是有变化的，所以在此方法中根据nextProps和this.props来查明重传的props是否改变，以及如果改变了要执行啥，比如根据新的props调用this.setState出发当前组件的重新render -
shouldComponentUpdate(nextProps, nextState)
此方法通过比较nextProps，nextState及当前组件的this.props，this.state，返回true时当前组件将继续执行更新过程，返回false则当前组件更新停止，以此可用来减少组件的不必要渲染，优化组件性能。
ps：这边也可以看出，就算componentWillReceiveProps()中执行了this.setState，更新了state，但在render前（如shouldComponentUpdate，componentWillUpdate），this.state依然指向更新前的state，不然nextState及当前组件的this.state的对比就一直是true了。 -
componentWillUpdate(nextProps, nextState)
此方法在调用render方法前执行，在这边可执行一些组件更新发生前的工作，一般较少用。 -
render
render方法在上文讲过，这边只是重新调用。 -
componentDidUpdate(prevProps, prevState)
此方法在组件更新后被调用，可以操作组件更新的DOM，prevProps和prevState这两个参数指的是组件更新前的props和state
卸载阶段
此阶段只有一个生命周期方法：componentWillUnmount
componentWillUnmount
此方法在组件被卸载前调用，可以在这里执行一些清理工作，比如清楚组件中使用的定时器，清楚componentDidMount中手动创建的DOM元素等，以避免引起内存泄漏。
十一、react组件的划分业务组件技术组件
根据组件的职责通常把组件分为UI组件和容器组件。UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。两者通过React-Redux 提供connect方法联系起来。
例子：开关负责控制显示器的状态，显示器只负责开启或者关闭。
十二、React中Element 和 Component 有何区别
简单地说，一个 React element 描述了你想在屏幕上看到什么。换个说法就是，一个 React element 是一些 UI 的对象表示。
一个 React Component 是一个函数或一个类，它可以接受输入并返回一个 React element (通常是通过 JSX ，它被转化成一个 createElement 调用）。
十三、shouldComponentUpdate 应该做什么
其实这个问题也是跟reconciliation有关系。“和解（ reconciliation ）的最终目标是以最有效的方式，根据新的状态更新用户界面”。如果我们知道我们的用户界面（UI）的某一部分不会改变，那么没有理由让 React 很麻烦地试图去弄清楚它是否应该渲染。通过从 shouldComponentUpdate 返回 false，React 将假定当前组件及其所有子组件将保持与当前组件相同（对比当前状态和前一个状态）。
十四、Flux架构模式
MVC模式
通过关注数据界面分离，来鼓励改进应用程序结构。也就是MVC将业务数据(model)与用户界面(view)隔离，用控制器(controller)管理逻辑和用户输入。
MVC模式中的三种角色
-
Model
Model负责保存应用数组，和后端交互同步应用数据，或校验数据。Model主要与业务数据相关，与应用内交互状态无关 -
View
View是Model的可视化，表示当前状态的视图。前端View负责构建和维护DOM元素。更新Model的实际任务是在Controller上。用户可以与View交互，包括读取和编辑Model，在Model中获取或设置属性值。一个view通常对应一个model，所以在世实际开发过程中，会面临多个view对应多个model的状况 -
Controller
Controller负责连接view和model，model的任何变化会应用到view中，view的操作会通过controller应用到model中。
MVC的问题
MVC模式看上去没有什么问题，但是它存在一个十分麻烦的缺点，这个缺点随着你的项目越来越大，逻辑复杂的时候非常的明显，就是混乱的数据流动方式。
Flux模式：
首先，Flux将一个应用分成四个部分。
View： 视图层
Action（动作）：视图层发出的消息（比如mouseClick）
Dispatcher（派发器）：用来接收Actions、执行回调函数
Store（数据层）：用来存放应用的状态，一旦发生变动，就提醒Views要更新页面
Flux 的最大特点，就是数据的"单向流动"。
- 用户访问 View
- View 发出用户的 Action
- Dispatcher 收到 Action，要求 Store 进行相应的更新
- Store 更新后，发出一个"change"事件
- View 收到"change"事件后，更新页面
上面过程中，数据总是"单向流动"，任何相邻的部分都不会发生数据的"双向流动"。这保证了流程的清晰
Flux的不足
虽然Flux的中心化控制十分优雅。但是它最大的问题就是Flux的冗余代码太多。虽然Flux源码中几乎只有dispatcher的实现，但是在每个应用中东需要手动创建一个dispatcher的实例，而且在一个应用中含有多个store。
基于Flux的Redux
Redux与Flux的区别
- Redux中只有一个store，而Flux中有多个store来存储应用数据，并在store里面执行更新逻辑，当store变化的时候再通知controller-view更新自己的数据，Redux是将各个store整合成一个完整的store,并且可以根据这个store来得到完整的state，而且更新的逻辑也不再store中，而是在reducer中。
- Redux没有Dispatcher这个概念。它使用的是reducer来进行事件的处理，reducer是一个纯函数(preState, action) => newState,在Redux应用中，可能有多个reducer，每一reducer来负责维护应用整体state树中某一部分，多个reducer通过combineReducers方法合成一个根reducer,来维护整个state
Redux设计和使用的三大原则
单一的数据源
在Redux的思想里，一个应用永远只有唯一的数据源，使用单一数据源的好处在于整个应用状态都保存在一个对象中，我们随时可以提取出整个应用的状态进行持久化,这样的设计也为SSR提供了可能
状态是只读的
状态是只读的这个和Flux的思想相同，但是Redux中还限制了store的setter从而限制修改应用状态的能力。在Redux中，我们不会用代码来定义一个store，而是通过reducer，通过当前触发的action来对当前应用的state进行迭代，这里没有直接改变应用的状态，而是返回了一个全新的状态。
状态修改均由纯函数完成
在Flux中，是通过dispatcher的dispatch来触发action，不仅产生了冗余代码，而且直接修改了store中的数据，无法保存每次数据变化前后的状态，在Redux中，通过纯函数reducer来确定状态的改变，因为reducer是纯函数，所以形同的输入，一定会得到相同的输出，这样的话，返回的是一个全新的state，可以跟踪每一次触发action而改变状态的结果成为了可能，也就是可以达到炫酷的time travel 调试方法。
十五、高阶组件
高阶组件定义
a higher-order component is a function that takes a component and returns a new component
翻译：高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。
理解了吗？看了定义似懂非懂？继续往下看。
函数模拟高阶组件
我们通过普通函数来理解什么是高阶组件
最普通的方法，一个welcome，一个goodbye。两个函数先从localStorage读取了username，然后对username做了一些处理。
function welcome() {
let username = localStorage.getItem('username');
console.log('welcome ' + username);
}
function goodbey() {
let username = localStorage.getItem('username');
console.log('goodbey ' + username);
}
welcome();
goodbey();
我们发现两个函数有一句代码是一样的，这叫冗余唉。不好不好~（你可以把那一句代码理解成平时的一大堆代码）
我们要写一个中间函数，读取username,他来负责把username传递给两个函数。
function welcome(username) {
console.log('welcome ' + username);
}
function goodbey(username) {
console.log('goodbey ' + username);
}
function wrapWithUsername(wrappedFunc) {
let newFunc = () => {
let username = localStorage.getItem('username');
wrappedFunc(username);
};
return newFunc;
}
welcome = wrapWithUsername(welcome);
goodbey = wrapWithUsername(goodbey);
welcome();
welcome();
好了，我们里面的wrapWithUsername函数就是一个“高阶函数”。
他做了什么？他帮我们处理了username，传递给目标函数。我们调用最终的函数welcome的时候，根本不用关心username是怎么来的。
我们增加个用户study函数。
function study(username){
console.log(username+' study');
}
study = wrapWithUsername(study);
study();
这里你是不是理解了为什么说wrapWithUsername是高阶函数？我们只需要知道，用wrapWithUsername包装我们的study函数后，study函数第一个参数是username。
我们写平时写代码的时候，不用关心wrapWithUsername内部是如何实现的。
高阶组件
高阶组件就是一个没有副作用的纯函数。
我们把上一节的函数统统改成react组件。
最普通的组件哦。
welcome函数转为react组件。
import React, {Component} from 'react'
class Welcome extends Component {
constructor(props) {
super(props);
this.state = {
username: ''
}
}
componentWillMount() {
let username = localStorage.getItem('username');
this.setState({
username: username
})
}
render() {
return (
<div>welcome {this.state.username}</div>
)
}
}
export default Welcome;
goodbey函数转为react组件。
import React, {Component} from 'react'
class Goodbye extends Component {
constructor(props) {
super(props);
this.state = {
username: ''
}
}
componentWillMount() {
let username = localStorage.getItem('username');
this.setState({
username: username
})
}
render() {
return (
<div>goodbye {this.state.username}</div>
)
}
}
export default Goodbye;
现在你是不是更能看到问题所在了？两个组件大部分代码都是重复的唉。
按照上一节wrapWithUsername函数的思路，我们来写一个高阶组件(高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件)。
import React, {Component} from 'react'
export default (WrappedComponent) => {
class NewComponent extends Component {
constructor() {
super();
this.state = {
username: ''
}
}
componentWillMount() {
let username = localStorage.getItem('username');
this.setState({
username: username
})
}
render() {
return <WrappedComponent username={this.state.username}/>
}
}
return NewComponent
}
这样我们就能简化Welcome组件和Goodbye组件。
import React, {Component} from 'react';
import wrapWithUsername from 'wrapWithUsername';
class Welcome extends Component {
render() {
return (
<div>welcome {this.props.username}</div>
)
}
}
Welcome = wrapWithUsername(Welcome);
export default Welcome;
import React, {Component} from 'react';
import wrapWithUsername from 'wrapWithUsername';
class Goodbye extends Component {
render() {
return (
<div>goodbye {this.props.username}</div>
)
}
}
Goodbye = wrapWithUsername(Goodbye);
export default Goodbye;
看到没有，高阶组件就是把username通过props传递给目标组件了。目标组件只管从props里面拿来用就好了。
到这里位置，高阶组件就讲完了。你再返回去理解下定义，是不是豁然开朗
65
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
