浅谈React

React，Facebook的一个开源JS框架，专注于View层，不包括数据访问层或者那种Hash路由（不过React有插件支持）；与Angularjs，Emberjs等大而全的框架不同，React专注的中心是Component，即组件，React认为一切页面元素都可以抽象成组件，比如一个表单，或者表单中的某一项。

 

• 组件模式：可重用组件
• 虚拟DOM：React不直接操作DOM，将DOM结构存储在内存中，然后同render()的返回内容进行比较，计算出需要改动的地方，最后才反映到真实DOM中。
• 移动端支持
• JSX语法：JS＋HTML

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
      </div>
    );
  }
}

2、技术点

1）prop：描述组建的不可变属性，一般render调用组件时，作为组件的“参数”，传入该组件。

2）state：描述组件的可变属性，当state发生变化时，会触发render函数，对UI进行重绘。

3）refs：

4）常用的生命周期函数

组件加载前调用

componentWillMount() {
}

组件加载后调用

componentDidMount(){
}

组件接受新的参数时调用

componentWillReceiveProps(nextProps){
}

5）条件判断
逻辑与：&&
条件表达式：a?b:c

6）Lamda表达式
语法：functionName = (参数) => {…}
可避免this问题

3、react-redux
1）为什么要用Redux？

• 大量无规律的交互和异步操作导致了前端的复杂性，这些操作的结果都是改变了当前View的状态，随着代码量越来越大，我们要维护的状态也越来越多。
• Redux试图让每个State变化都是可预测的，将应用中所有的动作与状态都统一管理，让一切有据可循。

2）单向数据流

• 首先，用户（通过View）发出Action，发出方式就用到了dispatch方法。
• 然后，Store自动调用Reducer，并且传入两个参数：当前State和收到的Action，Reducer会返回NewState
• State一旦有变化，Store就会调用监听函数，来更新View。

架构层面上讲，我们希望UI跟数据和逻辑分离，UI只负责渲染，数据和逻辑交由其它部分处理，从数据流向方面来说, 单向数据流确保了整个流程清晰。

4、react-router
就前端而言，路由用于页面间的跳转。当url发生变化时，路由相应的做出一些相应，从而来保证目前的url和要展示的界面一一对应好。

当前页面携带参数：browseHistory.push(path,args1,args2…)
跳转后页面接收参数：this.location.props.args1…