个人学习REACT知识点总结

个人近期react学习整理的资料包括react全家桶(react, react-router, redux, react-redux)
不定时更新

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);
    });

2.POST请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

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
- 请求的路径: /xxx?name=tom&age=18
- ?后面的部分就是query参数: 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) // 应用上异步中间件
)

combineReducers()

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

export default combineReducers({
    xxx,
    yyy
})

三个核心概念

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文件夹下

纯函数与高阶函数

纯函数

1.一类特别的函数: 只要是同样的输入，必定得到同样的输出
2.必须遵守以下一些约束
- a.不得改写参数
- b.不能调用系统 I/O 的API
- c.能调用Date.now()或者Math.random()等不纯的方法
3.reducer函数必须是一个纯函数

高阶函数

4.理解: 一类特别的函数
- a.情况1: 参数是函数
- b.情况2: 返回是函数
5.常见的高阶函数:
- a.定时器设置函数
- b.数组的map()/filter()/reduce()/find()/bind()
- c.react-redux中的connect函数
6.作用:
- a.能实现更加动态, 更加可扩展的功能

REACT知识点整理

个人学习REACT知识点总结

react组件内三大属性

组件内要注意的事项

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

axios

react-router相关

组件

history API

match location

redux

核心api

三个核心概念

redux-react

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

相关API

纯函数与高阶函数

纯函数

高阶函数