一、context实现数据传递
在react中，props和state都可以设置数据。不同的是，props借助组件属性传递数据但不可以渲染组件，它相对来说是“静态的”；state可以监听事件来修改数据并重新渲染组件，它相对来说是“动态的”。要想实现组件间传递数据并且可以根据state重新渲染组件，就必须一层层地传递props和this.state。
redux借助context这个全局API，以及内置的getChildContext方法简化了数据传递。context是一个全局的变量，getChildContext让react有能力向context中写入数据，并让当前组件的所有子组件能够从中获取到数据。
如果在context中传递state状态，那么context的数据就会根据state状态的变化而变化，子组件也会跟着被重新渲染。
import React from 'react'
import PropTypes from 'prop-types'
class SubOneChild extends React.Component{
static contextTypes = {
number: PropTypes.number
};
render(){
return <h2> { this.context.number } </h2>
}
}
class SubOne extends React.Component{
static contextTypes = {
number: PropTypes.number
};
render(){
console.log(this.context);
return (
<div>
<h4> SubOne: { this.context.number }</h4>
<SubOneChild />
</div>
)
}
}
class App extends React.Component{
// 使用context必须要对数据类型进行校验
static childContextTypes = {
number: PropTypes.number
};
constructor(props){
super(props);
this.state = {
number: 10
}
}
// 使用getChildContext向context传递数据
getChildContext(){
return this.state
}
handleChange(){
this.setState({
number: this.state.number + 1
})
}
render(){
return (
<div>
<h2>App: { this.state.number }</h2>
<button onClick={()=>this.handleChange()}>点击增加</button>
<SubOne />
</div>
)
}
}
export default App
上例并没有使用props传递this.state.number，而是通过context实现了数据的传递。它将数据传递简化为两步：第一步，父组件向context注入state数据并规定context数据协议，第二部，任意层级的子组件根据同样的context数据协议获取数据。
二、实现同步react-redux
react-redux做了两步：将整个ReactDOM要渲染的组件用Provider包裹起来，只用Provider向context注入state数据；任意组件通过connect从props中获取state数据和sction事件。
// src/my-react-redux.js
import React from 'react'
import PropTypes from 'prop-types'
// 1.仿写redux
export function createStore(reducer) {
let currentState = {};
let currentListeners = [];
function getState() {
return currentState;
}
function subscribe(listener) {
currentListeners.push(listener);
}
function dispatch(action) {
currentState = reducer(currentState, action);
currentListeners.forEach(v=>v())
}
dispatch({type: '@#$%^&*('}); // 执行一遍获取默认state
return { getState, subscribe, dispatch }
}
// 2.仿写react-redux
// Provider: 把store写到context里，全局只包裹一次，这样所有的子元素都可以取到store
export class Provider extends React.Component{
// 规定数据协议
static childContextTypes = {
store: PropTypes.object
};
// 从Provider属性中获取过来store
constructor(props, context){
super(props, context);
this.store = props.store;
}
// 向context中传递当前组件的store，以允许任意子组件都可以获取这个store
getChildContext(){
return { store: this.store }
}
// 返回被包裹的组件
render(){
return this.props.children
}
}
// connect接收组件，更新redux数据放到组件的属性里
// export function connect(mapStateToProps, mapDispatchToProps) {
// return function (WrapComponent) {
// return class ConnectComponent extends React.Component{}
// }
// }
// 上述带参数的装饰器的简便写法
export const connect = (mapStateToProps=state=>state, mapDispatchToProps={})=>(WrapComponent)=>{
return class ConnectComponent extends React.Component{
// 规定context数据协议
static contextTypes = {
store: PropTypes.object
};
// 注意要继承context，在state中设置props参数来接收最外层父组件向context中传递的数据
constructor(props, context){
super(props, context);
this.state = {
props: {}
}
}
// 获取store，并调用store的监听函数，来监听一个事件；监听后要执行一次更新来渲染一次组件
componentDidMount(){
const { store } = this.context;
store.subscribe(()=>this.update()); // 监听数据变化
this.update();
}
// 主函数，主要调用store.dispatch(action)方法来更新store以及中间组件ConnectComponent的状态ConnectComponentConCthis.state.props
update(){
const { store } = this.context;
const stateProps = mapStateToProps(store.getState());
const dispatchProps = ConnectComponent.bindActionCreator(mapDispatchToProps, store.dispatch);
this.setState({
// 因为props会被重写，一定要注意这里的顺序
props: {
...this.state.props,
...stateProps,
...dispatchProps
}
})
}
static bindActionCreator(mapDispatchToProps, dispatch){
let event = {};
Object.keys(mapDispatchToProps).forEach(v=>{
let func = mapDispatchToProps[v];
event[v] = (...args)=>dispatch(func(...args)); // 注意把func的参数传进来，用dispatch调用func
});
return event
}
render(){// 将中间组件ConnectComponent的state透传给被包裹的组件
return <WrapComponent { ...this.state.props } />
}
}
};
把reducer重写一下：
// src/my-reducer.js
const ADD = 'ADD';
const REDUCE = 'REDUCE';
export function reducer(state=0, action) {
// action都是事件类型
switch(action.type){
case ADD:
return state + 1;
case REDUCE:
return state - 1;
default:
return 10
}
}
export function add() {
return { type: ADD }
}
export function reduce() {
return { type: REDUCE }
}
app.js中内容改写为：
// src/my-app.js
import React from 'react'
import { connect } from "./my-react-redux";
import { add, reduce } from "./my-reducer";
@connect(state=>({number:state}))
class SubOneChild extends React.Component{
render(){
return <p> { this.props.number } </p>
}
}
@connect(state=>({number:state}))
class SubOne extends React.Component{
render(){
return (
<div>
<h3> SubOne: { this.props.number }</h3>
<SubOneChild />
</div>
)
}
}
@connect(state=>({number:state}), { add, reduce}) // 以对象的方式获取state
class App extends React.Component{
render(){
// console.log(this.props);
return (
<div>
<h1>App: { this.props.number }</h1>
<button onClick={this.props.add}>点击增加</button>
<SubOne />
</div>
)
}
}
export default App
在index.js中引入App。
// src/index.js
import React from 'react'
import ReactDOM from 'react-dom'
import { reducer } from './my-reducer'
import {createStore, Provider} from './my-react-redux'
import App from './my-app'
const store = createStore(reducer);
ReactDOM.render(
<Provider store={ store }>
<App />
</Provider>,
document.getElementById('root')
);
其大致流程图如下：
