This time I will bring you a detailed comparison of the use cases of react, redux, and react-redux. What are the precautions for using react, redux, and react-redux? Here are the actual cases. Let’s take a look. .
ReactFor some small projects, it is enough to use only React. Props and state can be used for data management. So when do you need to introduce Redux? When the data for rendering a component is obtained from the parent component through props, it is usually A --> B, but as the business complexity increases, it may be like this: A --> B -- > C --> D --> E, the data required by E needs to be passed from A through props, and the corresponding E --> A reversely passes the callback. The component BCD does not need these data, but it must be passed through them, which is indeed a bit unpleasant, and the passed props and callbacks will also affect the reuse of the BCD component. Or if sibling components want to share certain data, it is not very convenient to transfer or obtain it. In situations like this, it is necessary to introduce Redux. Actually A --> B --> C --> D --> E In this case, React can get the data without passing props layer by layer. Just use Context. . The react-redux that will be discussed later uses Context to allow each sub-component to get the data in the store. ReduxIn fact, we just want to find a place to store some shared data. Everyone can get it and modify it, that's all. Is it okay to put it in one all variables? OK, of course it works, but it’s too inelegant and not Now we need to write such a function, which satisfies:function createStore(reducer, initialState) { // currentState就是那个数据 let currentState = initialState; let listener = () => {}; function getState() { return currentState; } function dispatch(action) { currentState = reducer(currentState, action); // 更新数据 listener(); // 执行订阅函数 return action; } function subscribe(newListener) { listener = newListener; // 取消订阅函数 return function unsubscribe() { listener = () => {}; }; } return { getState, dispatch, subscribe }; } const store = createStore(reducer); store.getState(); // 获取数据 store.dispatch({type: 'ADD_TODO'}); // 更新数据 store.subscribe(() => {/* update UI */}); // 注册订阅函数
<TopWrapComponent store={store}> <App /> </TopWrapComponent>,
function connect(mapStateToProps, mapDispatchToProps) { return function(WrappedComponent) { class Connect extends React.Component { componentDidMount() { // 组件加载完成后订阅store变化,如果store有变化则更新UI this.unsubscribe = this.context.store.subscribe(this.handleStoreChange.bind(this)); } componentWillUnmount() { // 组件销毁后,取消订阅事件 this.unsubscribe(); } handleStoreChange() { // 更新UI this.forceUpdate(); } render() { return ( <WrappedComponent {...this.props} {...mapStateToProps(this.context.store.getState())} // 参数是store里面的数据 {...mapDispatchToProps(this.context.store.dispatch)} // 参数是store.dispatch /> ); } } Connect.contextTypes = { store: PropTypes.object }; return Connect; }; }
const mapStateToProps = state => { return { count: state.count }; }; const mapDispatchToProps = dispatch => { return { dispatch }; }; export default connect(mapStateToProps, mapDispatchToProps)(Child); // 上述代码执行之后,可以看到connect函数里面的 <WrappedComponent {...this.props} {...mapStateToProps(this.context.store.getState())} {...mapDispatchToProps(this.context.store.dispatch)} /> // 就变成了 <WrappedComponent {...this.props} {count: store.getState().count} {dispatch: store.dispatch} /> // 这样,子组件Child的props里面就多了count和dispatch两个属性 // count可以用来渲染UI,dispatch可以用来触发回调
So,这样就OK了?OK了。 通过一个闭包生成一个数据中心store,然后把这个store绑定到React的顶层props里面,子组件通过HOC建立与顶层props.store的联系,进而获取数据、修改数据、更新UI。 这里主要讲了一下三者怎么窜在一起的,如果想了解更高级的功能,比如redux中间件、reducer拆分、connect的其他参数等,可以去看一下对应的源码。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
The above is the detailed content of Detailed comparison of react, redux, and react-redux use cases. For more information, please follow other related articles on the PHP Chinese website!