react组件内三大属性

1.state: 值为容器对象, 保存的是组件内可变的数据,组件根据state中的数据显示, 要更新界面只要更新state即可 2.props: 值为容器对象, 保存的是从组件外传递过来的数据, 当前组件只读, 父组件修改了自动显示新数据 3.refs: 值为容器对象, 保存的是n个有ref属性的dom元素对象, 属性名是ref指定的标识名称, 值为对应的dom元素

组件内要注意的事项

1.组件内置的方法中的this为组件对象 2.在组件类中自定义的方法中this为null a.强制绑定this: 通过函数对象的bind() b.箭头函数(ES6模块化编码时才能使用)

组件的生命周期(相应钩子函数)

constructor(): 当创建组件对象时调用 componentWillMount(): 可以为第一次render()调用, 做一些同步的准备工作 render(): 返回需要显示的虚拟DOM componentDidMount(): 执行异步任务代码: 发ajax请求, 启动定时器, 绑定监听 componentWillUpdate(): 更新之前 render(): 重新渲染组件 componentDidUpdate(): 更新之后 componentWillUnmount(): 死亡之前调用, 做一些收尾的工作 ** componentWillReceiveProps()**: 监视接收到新的props, 发送ajax 加粗部分为重要的钩子函数

axios

  1. GET请求
xios.get('/user?ID=12345')
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });
axios.get('/user', {
    params: {
      ID: 12345
    }
})
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  1. POST请求
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});
1
2
3
4
5
6
7
8
9
10

react-router相关

组件

  1. 路由的基本
  2. 路由的基本有#一般用在
  3. Route是路由的一个原材料，它是控制路径对应显示的组件。我们经常用的是exact、path以及component属性。 4.渲染时将导航到一个新地址，这个新地址覆盖在访问历史信息里面的本该访问的那个地址。 5.为你的应用提供声明式，无障碍导航。 6.这是 的特殊版，顾名思义这就是为页面导航准备的。因为导航需要有 “激活状态”。 7.只渲染出第一个与当前访问地址匹配的<0route>或。

history API

a.History.createBrowserHistory(): 得到封装window.history的管理对象 b.History.createHashHistory(): 得到封装window.location.hash的管理对象 c.history.push(): 添加一个新的历史记录 d.history.replace(): 用一个新的历史记录替换当前的记录 e.history.goBack(): 回退到上一个历史记录 f.history.goForword(): 前进到下一个历史记录 g.history.listen(function(location){}): 监视历史记录的变化

match location

match -> this.props.match.params.id(post请求) location -> this.props.location.query.id(get请求)

1.query参数

 路由的path: /xxx
 请求的路径: /xxxname=tom&age=18
 ?后面的部分就是quer参数: name=tom, age=18

2.param参数

 路由的path: /xxx/:name/:age
 请求的路径: /xxx/jack/18
 param参数: name=jack,age=18
 params.name, params.age

redux

核心api

createStore()
作用: 创建包含指定reducer的store对象
store对象
redux库最核心的管理对象它内部维护着:state, reducer
核心方法:
getState() 返回应用当前的 state 树。它与 store 的最后一个 reducer 返回值相同。
dispatch(action) 分发 action。这是触发 state 变化的惟一途径。
subscribe(listener) 监听数据更新,从新渲染组件
applyMiddleware()

1.作用:应用上基于redux的中间件(插件库) 2.编码:

import {createStore, applyMiddleware} from 'redux'
import thunk from 'redux-thunk'  // redux异步中间件
const store = createStore(
  counter,
  applyMiddleware(thunk) // 应用上异步中间件
)
1
2
3
4
5
6
combineReducers()

1.作用:合并多个reducer函数 2.编码:

export default combineReducers({
    xxx,
    yyy
})
1
2
3
4

三个核心概念

action:标识要执行行为的对象

reducer:根据老的state和action, 产生新的state的纯函数

store:将state,action与reducer联系在一起的对象

redux-react

React-Redux将所有组件分成两大类

1.UI组件

a.只负责 UI 的呈现，不带有任何业务逻辑
  
b.通过props接收数据(一般数据和函数)

c.不使用任何 Redux 的 API
d.一般保存在components文件夹下

2.容器组件

a.负责管理数据和业务逻辑，不负责UI的呈现
b.使用 Redux 的 API
c.一般保存在containers文件夹下

相关API

1.Provider 让所有组件都可以得到state数据
<Provider store={store}>
  <App />
</Provider>
1
2
3
2.connect() 用于包装 UI 组件生成容器组件

纯函数与高阶函数

纯函数
  1. 一类特别的函数: 只要是同样的输入，必定得到同样的输出
  2. 必须遵守以下一些约束 a.不得改写参数 b.不能调用系统 I/O 的API c.能调用Date.now()或者Math.random()等不纯的方法
  3. reducer函数必须是一个纯函数
高阶函数
  1. 理解: 一类特别的函数 a.情况1: 参数是函数 b.情况2: 返回是函数
  2. 常见的高阶函数: a.定时器设置函数 b.数组的map()/filter()/reduce()/find()/bind() c.react-redux中的connect函数
  3. 作用: a.能实现更加动态, 更加可扩展的功能

TOC