react小书学习mark

timg.jpg

1、高阶组件是一个函数，接受一个组件作为参数，返回一个新的组件。新的组件使用传入的组件作为子组件。
1.1、高阶组件的作用其实不言而喻，其实就是为了组件之间的代码复用。组件可能有着某些相同的逻辑，把这些逻辑抽离出来，放到高阶组件中进行复用。高阶组件内部的包装组件和被包装组件之间通过 props 传递数据。
2、React.js 的 context 其实像就是组件树上某颗子树的全局变量（状态管理插件中使用）。
2.1、父组件中
static childContextTypes = {
themeColor: PropTypes.string
}
getChildContext () {
return { themeColor: this.state.themeColor }
}
子组件中
static contextTypes = {
themeColor: PropTypes.string
}
this.context.themeColor 调用
3、redux的学习
3.1、矛盾：“模块（组件）之间需要共享数据”，和“数据可能被任意修改导致不可预料的结果”之间的矛盾。
解决：dispatch(action) 负责修改数据
所有对数据的操作必须通过 dispatch 函数。
const store=createStore(state,stateChanger){
const getState=()=>state;
const dispatch=(action)=>stateChanger(state,action);
return {getState,dispatch}
}
3.2、解决数据自动更新，引入订阅者模式
store.subscribe(()=>render(state));
3.3、条件性渲染
state+stateChanger==reducer,reducer负责初始化state或者根据state,action产生新的state。
3.4、// 定一个 reducer
function reducer (state, action) {
/* 初始化 state 和 switch case */
}

// 生成 store
const store = createStore(reducer)

// 监听数据变化重新渲染页面
store.subscribe(() => renderApp(store.getState()))

// 首次渲染页面
renderApp(store.getState())

// 后面可以随意 dispatch 了，页面自动更新
store.dispatch(...)

React.js 小书地址：http://huziketang.mangojuice.top/books/react