共计 9368 个字符，预计需要花费 24 分钟才能阅读完成。
1. 要实现 redux, 先搞清楚 context
React.js 的 context 就是这么一个东西，某个组件只要往自己的 context 里面放了某些状态，这个组件之下的所有子组件都直接访问这个状态而不需要通过中间组件的传递。一个组件的 context 只有它的子组件能够访问，它的父组件是不能访问到的
// 现在我们修改 Index，让它往自己的 context 里面放一个 themeColor
class Index extends Component {
static childContextTypes = {// 要给组件设置 context，那么 childContextTypes 是必写的
themeColor: PropTypes.string
}
constructor () {
super()
this.state = {themeColor: ‘red’}
}
getChildContext () {
return {themeColor: this.state.themeColor}
}
render () {
return (
<div>
<Header />
<Main />
</div>
)
}
}
// 子组件直接获取 context 里面的东西
// 子组件要获取 context 里面的内容的话，就必须写 contextTypes 来声明和验证你需要获取的状态的类型，
// 它也是必写的
class Title extends Component {
static contextTypes = {
themeColor: PropTypes.string
}
render () {
return (
<h1 style={{color: this.context.themeColor}}>React.js</h1>
)
}
}
2. 实现共享状态优化
context 打破了组件和组件之间通过 props 传递数据的规范，极大地增强了组件之间的耦合性。而且，就如全局变量一样，context 里面的数据能被随意接触就能被随意修改，每个组件都能够改 context 里面的内容会导致程序的运行不可预料, 这时我们就需要规范对共享状态的修改
1. 假设使用的是一个共享状态 appState，每个人都可以修改它 2. 所有对共享状态的操作都是不可预料的（某个模块 appState.title = null 你一点意见都没有），出现问题的时候 debug 起来就非常困难 3. 如果所有对数据的操作必须通过 dispatch 函数。它接受一个参数 action，这个 action 是一个普通的 JavaScript 对象，里面必须包含一个 type 字段来声明你到底想干什么，那就好操作了 4. 我们可以把 appState 和 dispatch 抽离出来结合到一起形成 store，构建一个函数 createStore，用来专门生产这种 state 和 dispatch 的集合
/*createStore 接受两个参数，一个是表示应用程序状态的 state；另外一个是 stateChanger，
它来描述应用程序状态会根据 action 发生什么变化 */
function createStore (state, stateChanger) {
const getState = () => state
const dispatch = (action) => stateChanger(state, action)
return {getState, dispatch}
}
renderApp(store.getState()) // 首次渲染页面
store.dispatch({type: ‘UPDATE_TITLE_TEXT’, text: ‘《React.js》’}) // 修改标题文本
store.dispatch({type: ‘UPDATE_TITLE_COLOR’, color: ‘blue’}) // 修改标题颜色
renderApp(store.getState()) // 把新的数据渲染到页面上
3. 实现 Redux 数据刷新优化
1. 细上面代码中更改数据后需要手动调用 renderapp 刷新，这里我们可以用观察者模式优化刷新
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())//dispatch 后调用我传入 subscribe 的刷新方式
}
return {getState, dispatch, subscribe}
}
// 可以用同一个 APPstate 去渲染不同的页面
const store = createStore(appState, stateChanger)
store.subscribe(() => renderApp(store.getState()))
store.subscribe(() => renderApp2(store.getState()))
store.subscribe(() => renderApp3(store.getState()))
2. 避免重复渲染优化 这里直接引用胡子大叔的优化
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’}) // 修改标题颜色
4.Reducer
其实 appState 和 stateChanger 可以合并到一起去
1 将 appstate 放入 statechanger
function stateChanger (state, action) {
if (!state) {
return {
title: {
text: ‘React.js 小书 ’,
color: ‘red’,
},
content: {
text: ‘React.js 小书内容 ’,
color: ‘blue’
}
}
}
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
}
}
2.creactstore 的参数就会被优化为一个
function createStore (stateChanger) {
let state = null
const listeners = []
const subscribe = (listener) => listeners.push(listener)
const getState = () => state
const dispatch = (action) => {
state = stateChanger(state, action)
listeners.forEach((listener) => listener())
}
dispatch({}) // 初始化 state
return {getState, dispatch, subscribe}
}
3. 最后我们规定 createStore 参数的名字为 reducer，且 reducer 是一个纯函数
reducer 是不允许有副作用的。你不能在里面操作 DOM，也不能发 Ajax 请求，更不能直接修改 state，它要做的仅仅是 —— 初始化和计算新的 state
// 定一个 reducer
function reducer (state, action) {
/* 初始化 state 和 switch case */
}
// 生成 store
const store = createStore(reducer)
// 监听数据变化重新渲染页面
store.subscribe(() => renderApp(store.getState()))
// 首次渲染页面
renderApp(store.getState())
// 后面可以随意 dispatch 了，页面自动更新
store.dispatch(…)
5.React-redux 中的 store 和 context
React.js 的 context 中提出，我们可用把共享状态放到父组件的 context 上，这个父组件下所有的组件都可以从 context 中直接获取到状态而不需要一层层地进行传递了，但组件对其的改动会让 context 不可预料。store 的数据不是谁都能修改，而是约定只能通过 dispatch 来进行修改，这样的话每个组件既可以去 context 里面获取 store 从而获取状态，又不用担心它们乱改数据了，所以将 store 和 context 结合起来
1. 构建自己的 React-redux
import React, {Component} from ‘react’
import PropTypes from ‘prop-types’
import ReactDOM from ‘react-dom’
import Header from ‘./Header’
import Content from ‘./Content’
import ‘./index.css’
function createStore (reducer) {
let state = null
const listeners = [
const subscribe = (listener) => listeners.push(listener)
const getState = () => state// 这是函数表达式 调用它时 state 已经初始化了
const dispatch = (action) => {
state = reducer(state, action)
listeners.forEach((listener) => listener())
}
dispatch({}) // 初始化 state
return {getState, dispatch, subscribe}
}
const themeReducer = (state, action) => {
if (!state) return {
themeColor: ‘red’
}
switch (action.type) {
case ‘CHANGE_COLOR’:
return {…state, themeColor: action.themeColor}
default:
return state
}
}
const store = createStore(themeReducer)
class Index extends Component {
static childContextTypes = {
store: PropTypes.object
}
getChildContext () {
return {store}// 将 store 放入 context
}
render () {
return (
<div>
<Header />
<Content />
</div>
)
}
}
2. 子组件获取 context 中的配置
class Header extends Component {
static contextTypes = {
store: PropTypes.object
}
constructor () {
super()
this.state = {themeColor: ”}
}
componentWillMount () {
this._updateThemeColor()
}
_updateThemeColor () {
const {store} = this.context// 解构赋值取出来
const state = store.getState()
this.setState({themeColor: state.themeColor})// 放到 state 中来用
}
render () {
return (
<h1 style={{color: this.state.themeColor}}>React.js 小书 </h1>
)
}
}
3. 用 dispatch 去改变配置刷新页面
// 首先配置监听函数的刷新模式
componentWillMount () {
const {store} = this.context
this._updateThemeColor()// 获取默认数据加载
store.subscribe(() => this._updateThemeColor())//dispatch 数据更改后加载
}
// 触发事件
handleSwitchColor (color) {
const {store} = this.context
store.dispatch({
type: ‘CHANGE_COLOR’,
themeColor: color
})
}
6.React-redux 与组件拆分开, 让组件无污染可复用性强
可以把一些可复用的逻辑放在高阶组件当中，高阶组件包装的新组件和原来组件之间通过 props 传递信息，减少代码的重复程度, 我们需要高阶组件帮助我们从 context 取数据，然后用高阶组件把它们包装一层，高阶组件和 context 打交道，把里面数据取出来通过 props 传给 Dumb 组件
1. 这个高阶组件起名字叫 connect，因为它把 Dumb 组件和 context 连接 2. 每个传进去的组件需要 store 里面的数据都不一样的，所以除了给高阶组件传入 Dumb 组件以外，还需要告诉高级组件我们需要什么数据
import React, {Component} from ‘react’
import PropTypes from ‘prop-types’
//connect 现在是接受一个参数 mapStateToProps，然后返回一个函数，这个返回的函数才是高阶组件
export const connect = (mapStateToProps) => (WrappedComponent) => {
class Connect extends Component {
static contextTypes = {
store: PropTypes.object
}
render () {
const {store} = this.context
let stateProps = mapStateToProps(store.getState())
// {…stateProps} 意思是把这个对象里面的属性全部通过 `props` 方式传递进去
return <WrappedComponent {…stateProps} />
}
}
return Connect
}
———-
//mapStateToProps 为传入数据的方式
const mapStateToProps = (state) => {
return {
themeColor: state.themeColor
}
}
Header = connect(mapStateToProps)(Header)
// 这里的 mapStateToprops 在 connect 里面执行并把获取的数据放到 header 的 props 中
3. 除了传递数据我们还需要高阶组件来 dispatch
const mapDispatchToProps = (dispatch) => {
return {
onSwitchColor: (color) => {
dispatch({type: ‘CHANGE_COLOR’, themeColor: color})
}
}
}
4. 结合起来构建 Connect
export const connect = (mapStateToProps, mapDispatchToProps) => (WrappedComponent) => {
class Connect extends Component {
static contextTypes = {
store: PropTypes.object
}
constructor () {
super()
this.state = {
allProps: {}
}
}
componentWillMount () {
const {store} = this.context
this._updateProps()
store.subscribe(() => this._updateProps())
}
_updateProps () {
const {store} = this.context
let stateProps = mapStateToProps
? mapStateToProps(store.getState(), this.props)
: {} // 防止 mapStateToProps 没有传入
let dispatchProps = mapDispatchToProps
? mapDispatchToProps(store.dispatch, this.props)
: {} // 防止 mapDispatchToProps 没有传入
this.setState({
allProps: {
…stateProps,
…dispatchProps,
…this.props
}
})
}
render () {
return <WrappedComponent {…this.state.allProps} />
}
}
return Connect
}
5. 剥离出 index.js
class Index extends Component {
static childContextTypes = {
store: PropTypes.object
}
getChildContext () {
return {store}
}// 这些都是污染需要剥离
render () {
return (
<div>
<Header />
<Content />
</div>
)
}
}
6.Provider
// 将 index 中污染部分放入 Provider，再用成为 index 的父组件
export class Provider extends Component {
static propTypes = {
store: PropTypes.object,
children: PropTypes.any
}
static childContextTypes = {
store: PropTypes.object
}
getChildContext () {
return {
store: this.props.store
}
}
render () {
return (
<div>{this.props.children}</div>
)
}
}
…
// 头部引入 Provider
import {Provider} from ‘./react-redux’
…
// 删除 Index 里面所有关于 context 的代码
class Index extends Component {
render () {
return (
<div>
<Header />
<Content />
</div>
)
}
}
// 把 Provider 作为组件树的根节点
ReactDOM.render(
<Provider store={store}>
<Index />
</Provider>,
document.getElementById(‘root’)
)
