react组件编写非最佳实践
如果问我2018年最想掌握的东西是什么，第一个是webgl，第二个就是react.js全家桶了。之前也写了一些demo，也不经意间总结了一些东西，可能不是最好的写法，在这里做一些记录。
¶语法篇
1 灵活使用箭头函数
在给组件绑定类似onClick事件的时候,组件内定义的函数里面的this在执行的时候会变成全局，但是es6默认严格模式不允许全局，因此一般会用bind函数绑定this，当然，用箭头函数更简单，因为箭头函数会继承上下文的this。
2 多用三目表达式和逻辑符号
因为jsx语法不支持写if语句,但是我们可以用三目表达式来代替
{a?<A/>:<B/>}
但是有时候我们只用判断一次,不需要false情况下做处理，可以用逻辑与
!!a&&<A/>
3 利用解构赋值解决props过长导致的代码量过大
es6 里面在赋值新增加了解构赋值的语法，用起来很方便，例如：
let [a, b, c] = [1, 2, 3];
let {a,b,c} = {4,5};\\ c的值是undefined
在组件里面可以
const {id,name,title,time} = this.props
这样可以节约很多代码。
4 用SFC（Stateless Functional Component）代替一般的纯组件的class写法
sfc就是这样的代码：
const _handleClick(suggestedUrl, onClick, event) => {
event.preventDefault();
};
const RelatedSearch = ({ relatedQueries, onClick }) =>
<section className="related-search-container">
<h1 className="related-search-title">Related Searches:</h1>
<Layout x-small={2} small={3} medium={4} padded={true}>
{relatedQueries.map((query, index) =>
<Link
className="related-search-link"
onClick={(event) =>
_handleClick(query.searchQuery, onClick, event)}
key={index}>
{query.searchText}
</Link>
)}
</Layout>
</section>
export default RelatedSearch;
参数就是props，这种写法比用class写法省略很多东西，没有构造函数，用箭头函数代替render(),因为现在都用redux管理状态，所以有很多纯组件，这种写法可以减少代码量。
¶思路篇
1 关于state和props的区别
props ：一般用于父组件向子组件通信，在组件之间通信使用。
state : 一般用于组件内部的状态维护，更新组建内部的数据，状态，更新子组件的props等。
所以如果是组件本身的状态,不需要用到状态管理比如redux，就用state就行了；一般情况下都是用props的。
2 尽量是用纯组件，细化组件，提高组件复用
状态用redux处理，因为当组件更新时，如果组件的 props 和 state 都没发生改变，render 方法就不会触发，省去 Virtual DOM 的生成和比对过程，没状态的组件会提高性能。细化组件可以多次使用一个组件，因为react其实就像堆积木一样，组件就是每一块积木，积木越小越灵活。
3 reducer要灵活
首先说一点reducer是实现(state, action) -> newState的纯函数，所以不能有异步操作，需要异步的话yarn add react-thunk，请，当然也有其他的中间件，reducer是可以嵌套的，比如有studentlist的reducer，就可以写个student的函数，处理单个student的数据，在students函数里来处理所有的student的数据。这样避免单个reducer太长，逻辑混杂很难看的。reducer的编写比起组件来说要复杂一点我觉得，写法上也很考验js水平。关于reducer有文章可以参考Reducer 最佳实践，Redux 开发最重要的部分。
未完待续–还要讲的有高阶组件，中间件，异步操作等。