react详解

一，创建（创建前已安装node）

npm install -g create-react-app   /  cnpm install -g create-react-app

二， ReactJSX语法

React 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

我们不需要一定使用 JSX，但它有以下优点：

• JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
• 它是类型安全的，在编译过程中就能发现错误。
• 使用 JSX 编写模板更加简单快速。

三，传值

1.父组件给子组件传值

     1）在调用子组件的时候定义一个属性"msg"  <Header msg=''"></Header>

     2）子组件里面 this.props.msg

2.子组件给父组件传值

    1）父组件在调用子组件时，传入一整个组件给子组件<Children parent={ this } />

    2）父组件中定义一个方法getChildrenMsg(resulet, msg)，用来获取子组件传来的值以及执行其他操作

    3）子组件在通过this.props来获取到一整个组件this.props.parent或者this.props[parent]

    4）子组件调用父组件步骤2里定义的方法，通过bind绑定传值

四，生命周期

1.组件加载的时候触发的函数：

    constructor 、componentWillMount、 render 、componentDidMount

2.组件数据更新的时候触发的生命周期函数：

    shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate

3.你在父组件里面改变props传值的时候触发的：

    componentWillReceiveProps

4.组件销毁的时候触发的：

    componentWillUnmount

五，路由

    1、安装  cnpm install react-router-dom --save

    2、找到项目的根组件引入react-router-dom

       import { BrowserRouter as Router, Route, Link } from "react-router-dom";

    3、复制官网文档根组件里面的内容进行修改 

<Router>

<Link to="/">首页</Link>

<Link to="/about">关于我们</Link>

<Link to="/setting">设置</Link>

<Route exact path="/" component={Home} />

<Route path="/about" component={About} />

<Route path="/setting" component={Setting} />

</Router>

六，redux

 如果你的UI层非常简单，没有很多互动，Redux 就是不必要的，用了反而增加复杂性。Redux 的适用场景：多交互、多数据源。

1. Store

Store 就是保存数据的地方，你可以把它看成一个数据仓库。整个应用只能有一个 Store。

Redux 提供createStore这个函数，用来生成 Store。

import { createStore } from 'redux'; const store = createStore(fn);

2.state

Store对象包含所有数据。如果想得到某个时点的数据，就要对 Store 生成快照。这种时点的数据集合，就叫做 State，当前时刻的 State，可以通过store.getState()拿到。

3.Action

state的变化会导致view的变化，而用户接触不到state只能接触到view，而action是view发出的通知告诉state要发生变化了

const action = { type: 'ADD_TODO', payload: 'Learn Redux' };

4. Reducer

Store 收到 Action 以后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。

Reducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State。 const reducer = function (state, action) { // ... return new_state; };