react-redux的使用(二)

在这里插入图片描述在这里插入图片描述
在这里插入图片描述在这里插入图片描述
总结:
当点击提交按钮时会执行handleClick方法,这个方法会把action传给store,接着传给reducer,reducer接收到这个action之后就会去处理数据把新的数据返回给store,数据发生了改变,组件恰好又通过connect跟数据做了连接,所以这块是自动的过程,数据一旦发生了改变组件就会自动改变,以前还需要调用store.subscribe()方法做订阅,现在不需要了。
其它的actionType.js和actionCreators.js的创建自己去完成吧,套路跟之前一样。

可以通过解构赋值的方式精简代码:
在这里插入图片描述
这个时候TodoList组件里面只有一个render函数,而且TodoList组件只做了页面渲染的内容,当点击的时候做的这些业务逻辑实际上并不是在TodoList里实现的,这个时候TodoList组件实际上就是一个UI组件,它只负责页面的渲染,此时我们可以把它写成一个无状态组件的形式,无状态组件是一个函数,这个函数可以接收props参数,我们把this.props改成props参数就好了
在这里插入图片描述
无状态组件可以有效的提升代码的性能,因为它里面没有任何生命周期函数,同时也不会生成真正的组件实例。
在这里插入图片描述
此时我们没有直接导出TodoList这个组件,而是导出的connect方法执行的结果。connect方法把一些映射关系和业务逻辑集成到了TodoList UI组件里,TodoList是一个UI组件,当用connect把这个UI组件和数据和业务逻辑相结合的时候返回的内容就是容器组件了。

猜你喜欢

转载自blog.csdn.net/u013565133/article/details/88825143