React
React是单向数据流,没有数据向上回溯的能力,只能向下分发
- React中有props和state
props是父级传过来的属性
// 父组件
_hideAddress = () => {
console.log('o')
}
<ModifyAddress
hideAddress={this._hideAddress}
/>
// 子组件
<Modal
onClick={this.props.hideAddress}
/>
state是组件内部自行管理的状态
this.state = {
visible: false,
}
this.setState({
visible: true,
})
随着业务逻辑的增加,就会发现React无法让两个组件之间相互交流,拿到对方的数据
这个时候就只能将state放到公用的父组件中来管理,然后通过props分发 ==> reducer
而子组件去改变父组件的state,只能通过onClick触发父组件声明好的回调,
也就是说父组件需要提前声明好函数或方法描述state将如何改变,再将它作为属性传给子组件 ==> action这样就可以想到一个方法,将所有的state放在顶层统一维护,然后分发给所有的组件
Redux
Redux就作为一个专业的顶层将state分发给所有的组件
- action 声明式的数据结构，只提供事件的所有要素，不提供逻辑
- Redux 中只需把 action 创建函数的结果传给 dispatch() 方法即可发起一次 dispatch 过程
// action
const addTodo = (text) = {
type: 'ADD_TODO',
text
}
dispatch(addTodo('new text'))
- reducer 根据传入的 当前state 和 action , 返回一个新的 state
- action 只是描述事情发生了,而没有说明如何更新state,这就是reducer要做的事情
// 引入action
import { todoApp } from './actions'
// 初始化 state
const initialState = {
text: ''
}
// 现在可以处理 ADD_TODO。需要做的只是改变 state 中的 text
const todoApp = (state = initialState, action) = {
switch (action.type) {
case 'ADD_TODO':
return { ...state, text}
default:
return state
}
}
// 需要注意的是:
// 1. 不要改变state.
// 2. 如果遇到未知的action,返回久的state
- store 通过dispatch(action)来更新state
React-Redux
一般不会直接把这两个库直接拿来用,而是用react-redux
react-redux提供一个Provider和connect**
-
Provider是一个普通组件,可以作为app的分发点,只要有store属性就可以了,他会将state分发给所有被connect的组件
export default connect(mapStateToProps, mapDispatchToProps)(ComponentName)
-
connect先接受两个参数数据绑定(mapStateToProps)和事件绑定(mapDispatchToprops)再接收一个将要绑定的组件
mapStateToProps 你需要绑定一个函数,它的参数是state,返回你想要的几个值
const mapStateToProps = (state) => {
return {
newText: state.todoApp.text,
}
}
mapDispatchToProps 声明好的action作为回调,它的参数是dispatch
// 绑定所有action以及参数的dispatch，可以作为属性在组件里面使用
const mapDispatchToProps = (dispatch) => ({
dispatch
})
// 在组件中使用
this.props.dispatch(action(addTodo()))
最后
有不对的地方还请指出
谢谢啦
