实不相瞒对于我这样的前端小白，去年用到React开发项目的时候也看过React-redux但是说实话没有看他懂，后来用到的框架就是Vue所以没怎么研究React但是最近一直听移动端的朋友说到React-Native所以想重新看看react-redux再看看React-Native。没错我就是这么个善变的女人，哈哈哈，言归正传。
首先我觉学习react-redux的前提是知道什么是react-redux，以及为什么出现react-redux，这样才能真正意识到学习它的必要性。然后在学习它解决了什么问题基础上才能使用它。
1.Redux
共享状态值–state
举个例子！ 正常情况下多个子孙组件共享父组件的主题颜色themeColor时是这个样子的。
每层都需要写 props.themeColor，但是假如现在content里面有个按钮想要去改变这个themeColor在没有共享状态概念前就必须通过一层一层传递给index由index去修改themeColor通过父组件主动重新渲染的方式来传入新的 props，从而达到更新的效果。我的天！受不了了，这要是嵌套个几十个层级关系可怎么办啊，所以显然必须需要找到方法去改变这种传递方式。所以就有了context。React.js 的 context 其实像就是组件树上某颗子树的全局变量。
提高了修改数据的门槛
一个可以被不同模块任意修改共享的数据状态就是魔鬼，一旦数据可以任意修改，所有对共享状态的操作都是不可预料的出现问题的时候 debug 起来就非常困难，这就是老生常谈的尽量避免全局变量。
所以我们需要提高修改数据的门槛，在修改共享状态的时候，我们需要定义一个标准，并且去修改共享状态值。
function stateChanger (action) {
switch (action.type) {
case ‘UPDATE_TITLE_TEXT’:
appState.title.text = action.text
break
case ‘UPDATE_TITLE_COLOR’:
appState.title.color = action.color
break
default:
break
}
}
这样每次修改共享状态值就需要经过stateChanger。
我们就把它抽象出来一个 createStore
参数是共享状态值以及修改规则，函数里面包含 getState 和 dispatch 函数，方便我们使用。同时我们需要监听数据的变化，因为不仅仅需要改变状态值，还需要渲染到相应的Dom元素中去。
function createStore (state, stateChanger) {
const listeners = []
const subscribe = (listener) => listeners.push(listener)
const getState = () => state
const dispatch = (action) => {
stateChanger(state, action)
listeners.forEach((listener) => listener())
}
return { getState, dispatch, subscribe }
}
function renderApp (appState) {
renderTitle(appState.title)
renderContent(appState.content)
}
function renderTitle (title) {
const titleDOM = document.getElementById('title')
titleDOM.innerHTML = title.text
titleDOM.style.color = title.color
}
function renderContent (content) {
const contentDOM = document.getElementById('content')
contentDOM.innerHTML = content.text
contentDOM.style.color = content.color
}
let appState = {
title: {
text: 'React.js 小书',
color: 'red',
},
content: {
text: 'React.js 小书内容',
color: 'blue'
}
}
function stateChanger (state, action) {
switch (action.type) {
case 'UPDATE_TITLE_TEXT':
state.title.text = action.text
break
case 'UPDATE_TITLE_COLOR':
state.title.color = action.color
break
default:
break
}
}
const store = createStore(appState, stateChanger)
store.subscribe(() => renderApp(store.getState())) // 监听数据变化
renderApp(store.getState()) // 首次渲染页面
store.dispatch({ type: 'UPDATE_TITLE_TEXT', text: '《React.js 小书》' }) // 修改标题文本
store.dispatch({ type: 'UPDATE_TITLE_COLOR', color: 'blue' }) // 修改标题颜色
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
不希望每次数据改变后所有子组件变化
通过上面的代码示例你会发现，每次数据变化都会都出触发数据监听重新renderApp。那就会导致每一次所有的Dom元素重新加载。如何才能做到数据没有数据变化的子组件，不重新渲染呢，两步操作
一在数据渲染前进行新旧值得比较。二，赋值时对象不能指向同一地址
function createStore (state, stateChanger) {
const listeners = []
const subscribe = (listener) => listeners.push(listener)
const getState = () => state
const dispatch = (action) => {
state = stateChanger(state, action) // 覆盖原对象
listeners.forEach((listener) => listener())
}
return { getState, dispatch, subscribe }
}
function renderApp (newAppState, oldAppState = {}) { // 防止 oldAppState 没有传入，所以加了默认参数 oldAppState = {}
if (newAppState === oldAppState) return // 数据没有变化就不渲染了
console.log('render app...')
renderTitle(newAppState.title, oldAppState.title)
renderContent(newAppState.content, oldAppState.content)
}
function renderTitle (newTitle, oldTitle = {}) {
if (newTitle === oldTitle) return // 数据没有变化就不渲染了
console.log('render title...')
const titleDOM = document.getElementById('title')
titleDOM.innerHTML = newTitle.text
titleDOM.style.color = newTitle.color
}
function renderContent (newContent, oldContent = {}) {
if (newContent === oldContent) return // 数据没有变化就不渲染了
console.log('render content...')
const contentDOM = document.getElementById('content')
contentDOM.innerHTML = newContent.text
contentDOM.style.color = newContent.color
}
let appState = {
title: {
text: 'React.js 小书',
color: 'red',
},
content: {
text: 'React.js 小书内容',
color: 'blue'
}
}
function stateChanger (state, action) {
switch (action.type) {
case 'UPDATE_TITLE_TEXT':
return { // 构建新的对象并且返回
...state,
title: {
...state.title,
text: action.text
}
}
case 'UPDATE_TITLE_COLOR':
return { // 构建新的对象并且返回
...state,
title: {
...state.title,
color: action.color
}
}
default:
return state // 没有修改，返回原来的对象
}
}
const store = createStore(appState, stateChanger)
let oldState = store.getState() // 缓存旧的 state
store.subscribe(() => {
const newState = store.getState() // 数据可能变化，获取新的 state
renderApp(newState, oldState) // 把新旧的 state 传进去渲染
oldState = newState // 渲染完以后，新的 newState 变成了旧的 oldState，等待下一次数据变化重新渲染
})
renderApp(store.getState()) // 首次渲染页面
store.dispatch({ type: 'UPDATE_TITLE_TEXT', text: '《React.js 小书》' }) // 修改标题文本
store.dispatch({ type: 'UPDATE_TITLE_COLOR', color: 'blue' }) // 修改标题颜色
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
reducer函数
reducer函数其实就是将上述中的appstore以及stateChanger合并到一起。可以将它看成一个纯函数，只负责初始化State以及根据action改变state并返回一个更新后的state。
function themeReducer (state, action) {
if (!state) return {
themeName: 'Red Theme',
themeColor: 'red'
}
switch (action.type) {
case 'UPATE_THEME_NAME':
return { ...state, themeName: action.themeName }
case 'UPATE_THEME_COLOR':
return { ...state, themeColor: action.themeColor }
default:
return state
}
}
const store = createStore(themeReducer)
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
---------------------
作者：888小婷
来源：CSDN
原文：https://blog.csdn.net/qq_40674204/article/details/84939290
版权声明：本文为博主原创文章，转载请附上博文链接！