本文重要谈本身在react进修的历程当中总结出来的一些履历和资本，内容逻辑参考了“深切react手艺栈”一书以及网上的诸多资本，但也并不是完全照抄，代码基础都是本身实践，重要为日常平凡个人进修做一个总结和参考。
本文的症结内容：款式处置惩罚与css模块化、组件间通讯(非flux架构)、组件笼统、组件机能优化以及React 动画五种内容。
1.款式处置惩罚与css模块化
在react涌现之前，我们写款式平常是将css星散的，而且用less/sass预处置惩罚器，我个人在用backbone等MV*框架的时刻就习习用less而且用nodejs设置一个模块用来编译less。
但如许写会有一些题目：
定名争执是一个很罕见的题目，因而，我们要制订出一套本身的完全定名范例来，而且要防备和项目中引入的库涌现争执。
充足应用优先级是一个比较好的实践，然则如许写出的less代码有点像回调函数塔，虽然我本人并不以为这有什么不好以至还比较享用这类编程，但这确实不利于充足紧缩css代码。
因而我们引入css modules。
简朴的说，假如我们设置了css modules的话，那末你在css中写的类名和你在组件中写的class = ...都会被从新编译成一个哈希字符串，如许我们就不必斟酌定名争执的题目了，别的也可以比较自在的在local和global的css变量之间切换(现实上，如许的css变量默许都是local的，假如须要global，我们须要:global前缀，如许的话css变量就不会被转化成迥殊的哈希值了)
须要注重的是写法题目，这个时刻我们就不能在jsx中仅仅用className了，css module现实上限制了我们必需要用className={style.title}如许的写法，现实上我在尝试的时刻因为这个处所的bug调试了良久，而这也在某一种程度上给应用css module举行重构代码带来了一些难题。
关于css modules的入门引见，没错，阮一峰先生写了一份：http://www.ruanyifeng.com/blo…
别的，有的同砚以为css modules并不够文雅，现实上上文的写法限制的题目就是一个麻烦事，所以我们可以用react-css-modules库，这个库处理了css modules的一些不是很好的题目，因为上手并不难，这里不细致引见了(可以参考这里以及“深切react手艺栈”73页)
2.组件间通讯(非flux架构)
接下来我们总结一下react组件间通讯的几种体式格局，虽然如今有了redux等最好实践，然则许多时刻我们照样须要原生可用的组件通讯机制。
父组件向子组件之间
异常罕见，经由历程props机制通报即可。
子组件向父组件通讯
应用回调函数，回调函数本身定义在父组件中，经由历程props体式格局通报给子组件，在子组件中调用回调函数。
应用自定义事宜机制，这类要领更通用轻易，而且可以简化API，关于自定义事宜机制的细致运用要领我们在接下来睁开。
跨级组件通讯
context机制。不过这类机制react并不是迥殊引荐(不是迥殊引荐并不代表会在未来的版本没有，只是申明能够会发生肯定的弊病因而要慎用罕用)，context机制须要在上级组件(可以是父组件的父组件)定义一个getChildContext函数以下:
getChildContext(){
return{
color:"red",
}
}固然也可以用事宜机制
没有层级关联的组件通讯
这回只能用事宜机制了，虽然我之前剖析过别的框架的事宜机制部份都可以零丁拎出来用，然则这内里现实上有很多体式格局。
我起首试了一下js-signals这个库，这个也是React团队运用的，用起来也还简朴，npm install signals以后，我们可以零丁写一个Signal文件：
const signals= require('signals');
var Signal = {
started : new signals.Signal()
};我们可以把吸收事宜的函数定义在组件B中：
onStarted(param1, param2){
alert(param1 + param2);
}
constructor(props){
super(props);
Signal.started.add(this.onStarted); //add listener
}
然后在组件A中(注重dispatch的时刻要保证B已被组织出来了)：
handlethis () {
Signal.started.dispatch('foo', 'bar'); //dispatch signal passing custom parameters
}
render(){
return (
<button onClick={this.handlethis}>发射事宜</button>
)
}实在另有许多类似的组件，固然我们本身写一个功用弱的也不成题目，更多的体式格局，这篇文章引见的不错。
3.组件笼统
mixin
mixin是一个饱受诟病的东西，别的蛋疼的是在ES6的写法下也不能用，笔者如今写react的时刻都已不必了，所以这里举行简朴引见。
我们可以经由历程在createClass的时刻传入一个mixins数组，这个数组里是我们的一些通用的要领：
React.createClass({
mixins:[method1,method2]
//...
})这在ES6的class情势下是不能“直接”运用的。
ES7 decorator 与 mixin
ES7 的 decorator，作用就是返回一个新的 descriptor，并把这个新返回的 descriptor 应用到目标要领上。稍后我们将会看到，decorator 并不是只能作用到类的要领/属性上，它还可以作用到类本身。
固然，这个我只言片语肯定说不明白的，这个我要引荐淘宝前端团队的这篇文章。
别的，core-decorators这个库值得关注，它内里有一个mixin要领用于完成mixin，道理就是用了ES7 decorator，完成起来也不是异常庞杂。
末了，提示一下ES7 decorator虽然很酷，然则现在还处于提案阶段，虽然借助babel我们已可以体验了，然则间隔真正支撑另有一段间隔
高阶组件(HOC)
这是一个颇值得一提的话题。
我们应当听说过高阶函数，这类函数接收函数作为输入，或许是输出一个函数，比方map、reduce以及sort等函数。
一个高阶组件只是一个包装了别的一个 React 组件的 React 组件， 这类包装一般有两种体式格局：
1、属性代办（Props Proxy）：高阶组件操控通报给 WrappedComponent 的 props，
2、反向继续（Inheritance Inversion）：高阶组件继续（extends）WrappedComponent。
高阶组件的功用重要有以下几点：
1、代码复用，逻辑笼统，抽离底层预备（bootstrap）代码
2、衬着挟制
衬着挟制重要经由历程反向继续来完成，我们可以挑选是不是衬着原组件，也可以转变原组件的衬着结果(注重：我们经由历程
var elementsTree = super.render()可以拿到原组件的衬着结果，然后我们可以转变props以后，经由历程原生cloneElement要领建立出新的节点树)
3、State 笼统和变动
所谓笼统state的目标，就是将原组件作为一个地道的展现型组件，星散内部状况，将state交给高阶组件来掌握。比方：我们可以笼统出一个掌握input的高阶组件，从而不必在input中来有许多掌握state的代码。
4、Props 变动
我们可以读取、增添、编辑、删除被包裹组件的props
我在这里没有给出代码，为了防止文章过于冗杂以及和网上其他专题文章大部份反复，我重如果举行一些总结，详细内容我这里仍然是引荐一篇文章
4.组件机能优化
PureRender
PureRender这个观点现实上和纯函数有关，Pure指的是对一样的输入(关于react来讲就是props和state)老是获得雷同的输出，针对这个题目，React有一个shouldComponentUpdate钩子，这个钩子默许返回true，用于props或许state转变或许吸收到新的值时刻，可以供用户重写，如许在接收到雷同的props的时刻我们就可以防备其从新衬着。
PureRenderMixin在这个时刻要派上用场了，这是一个可以完成上述功用的官方插件，react是如许引见它的：
If your React component’s render function renders the same result given the same props and state, you can use this mixin for a performance boost in some cases.
现实上是经由历程一个浅比较来肯定是不是是该被衬着，这现实上是一个机能上的衡量和让步，深比较真的是消耗太多(我们鄙人一节会提出一个更好的处理方案)。
写法也比较简朴：
import PureRenderMixin from 'react-addons-pure-render-mixin';
class FooComponent extends React.Component {
constructor(props) {
super(props);
this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
}
render() {
return <div className={this.props.className}>foo</div>;
}
}我们可以在这里检察更多信息。
Immutable.js
在通报数据的时刻，我们可以用Immutable Data进一步进步机能。
Immutable.js定义了不可变对象，一个数据结构(MapListArraySet)一旦被定义，就不可变了，我们把它假如用于state，那末每次变化的时刻须要将state全部从新赋值。
上文提到，在shouldComponentUpdate运用PureRenderMixin因为机能衡量我们只能运用浅比较，然则假如我们用了Immutable.js，我们有更好的体式格局：直接用=== or is就可以推断，因为Immutable.js比较的是两个对象的hashCode或许valueOf，而且内部运用了trie数据结构(比方字典树)来存储，因而机能很高。
别的，因为Immutable.js中供应的数据结构是不可变的，我们不必忧郁js中源对象追随援用对象的变化而变化的题目，也不必斟酌函数中所谓的援用赋值，这给我们的编程带来了许多轻易。
固然也有不轻易的是Immutable.js的数据结构并不能和原生的数据结构混用，因而写法上须要分外注重，关于更多材料请看这里.
无状况组件
生命周期让react的组件变得功用异常壮大而且庞杂，从而难以保护，而有的时刻我们又要常常写一些本身没有状况，只从父组件接收props的组件，这类组件可以进步react的衬着机能，也被官方引荐。
const HelloWorld = (props) => <div>{props.name}</div>
ReactDOM.render(<HelloWorld name="HelloWorld" />,App)简朴，高效，在有些不须要转变的处所，比方没有用户交互纯声明性子的内容，可以用无状况组件。
react的diff算法
我们想要让效力更高，还要注重的一点就是要照应react的diff算法，react虽然有一个庞杂度仅为O(N)的diff算法，然则这个算法也不是全能的，我们要想让react效能最大化，就要去照应这个diff算法。
总的说来，这个diff算法大概有三点完成提要：
对两棵树举行比较，react以为，对节点的跨层级操纵挪动较少，所以只会对雷同层级的dom节点举行比较，即统一个父节点下的字节点，当发明节点已不存在时，就会删除节点，当发明节点新增时刻，就会插进去节点。
为了投合这个战略，我们只管不要对dom节点举行跨层级操纵(比方把某一个字节点转而挂在到某一个孙节点下面)，因为如许效力是比较低的。
对组件之间举行比较：假如是统一个范例的组件，根据第一条战略进一步比较假造dom树；假如不是，就将该组件推断为dirty，从而替代一切字节点；关于统一范例的组件，有能够其假造dom树没有发生变化，假如可以确实晓得这一点，那末就可以节约大批diff的操纵时候，因而，react许可用户经由历程shouldComponentUpdate钩子来推断组件是不是发生变化。
为了投合这个战略，我们可以运用上面提到的PureRender或许Immutable.js。
当节点处于统一个层级，react供应了插进去、挪动、删除操纵，这里重要指类似节点，比方<li>标签，因而react许可开辟者将统一个层级的节点增加唯一key举行操纵，统一个key以为是雷同节点。以后react有一套本身的算法划定规矩，对节点举行挪动操纵以到达请求(详细可以参考“深切react手艺栈”176页)。
为了投合这一划定规矩，我们要给li标签等增加一个key(现实上已被react强迫)，别的,在开辟历程当中只管减少将末了一个节点挪动到第一个的状况，因为这个时刻react要举行许多的挪动操纵。
5.React 动画
缓动函数
关于种种动画来讲，缓动体验平常是：linear < ease淡入淡出 < spring弹性动画\cubic bezier贝塞尔曲线。
动画的体式格局有css动画和js动画，然则许多时刻我们都是一升引的，所以辨别的太细致好像必要性也不大。
成熟的动画库
现实上动画常常是笔者比较无视的一个方面，因为还没毕业，大多时刻都是本身做小东西，末了动画就成了无足轻重的环节，别的如今的种种动画库许多，轻易到只须要一个class、只写一行代码就可以做出相对过得去的结果，本身也就疏于探究。
这部份内容重要引荐一些成熟的动画库。
起首是ReactCSSTransitionGroup，这个动画库供应了一些生命周期钩子，我们可以应用此加动画，详细学API的历程相称简朴，我置信看懂上面各个部份的同砚直接根据给出的链接肯定能顺遂学会。
另有react-smooth动画库，这也是一个比较有意思的动画库，写法类似css的多症结帧动画。而且几种缓动函数动画这里都能完成。
react-motion也是一个值得引荐的动画库，假如想用spring动画这个好像是更好的挑选。
别的，不说react，另有一个让我印象深入不得不提的就是vivus.js这个svg动画库，不得不说真是酷毙了。
