React知识点整理

Author Avatar
w4ctech 3月29日
  • 在其它设备中阅读本文章

最后更新于2019年03月29日; 如遇到问题,请留言及时通知站长

react 组件内三大属性

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

组件内要注意的事项

1. 组件内置的方法中的this为组件对象
2. 在组件类中自定义的方法中thisnull
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. 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
 请求的路径: /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) // 应用上异步中间件
)
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文件夹下

相关 API

1.Provider 让所有组件都可以得到 state 数据
<Provider store={store}>
  <App />
</Provider>
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. 能实现更加动态, 更加可扩展的功能

本文链接:https://i.w4ctech.cn/React/note.html
This blog is under a CC BY-NC-SA 3.0 Unported License