一,创建(创建前已安装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; };