Redux与React-看懂你就懂了
来源:互联网 发布:linux weblogic创建域 编辑:程序博客网 时间:2024/06/10 03:45
React是View层,把页面划分为一个个组件,但是组件之间的通信,数据传递,需要通过props传递,单纯的父子之间,这样做是可以的,但是随着页面的丰富,组件嵌套的深度,组件之间传递信息就显得略微麻烦,你能想象层层传递的状态么。。。。
大概就是下图所示的
Redux正好解决了这个问题,Redux把页面状态存在store中,任何一个组件都可以直接从store中获取数据,相当于本来是中央集权,通过层级传递,但是现在扁平化结构组织,直接从中心调取数据。
Redux-react:
重要的几个概念:
<Provider> connect store dispatch reducer 容器组件 显示组件
一般如果使用Redux-react的话,一般的工作思路是这样的:
1、编写显示组件
2、编写Reducer
3、编写容器组件
形成的代码结构大体如下:
//入口文件const store = createStore(reducer)render( <Provider store={store}> <App /> </Provider>, document.getElementById('root'))
//app文件入口const App = () => ( <div> <AddTodo /> <!--容器组件> <VisibleTodoList /> <Footer /> </div>)export default App
//容器组件中需要做两件事情//1、加载显示组件//2、向显示组件传递参数和回调函数,使用connect
这样,你就基本完成了基本的Redux-react的编写。
阅读全文
0 0
- Redux与React-看懂你就懂了
- float 原理,看懂这一篇,你就懂了!!!
- 看懂了这些图你就看懂了整个世界
- junit与ant整合的build.xml的编写-----非常重要,看懂这个,你就懂了ant的90%了
- 高僧与少女的私生子!看懂了,你离成功就不远!
- React-Native 之 redux 与 react-redux
- React-Native 之 redux 与 react-redux
- react与redux
- React与Redux
- 看懂这些故事 你做人就很成功了
- 看懂这些故事 你做人就很成功了
- 看懂这些故事 你做人就很成功了
- 看懂这些故事 你做人就很成功了
- 看懂这些故事 你做人就很成功了
- 看懂这些故事 你做人就很成功了
- 看懂这个寓言,你就不再是单身了
- 看懂这些故事 你做人就很成功了
- .[转] 看懂这些故事 你做人就很成功了
- ACM一些常用小技巧(博客收集+总结)
- hibernate一对一外键映射
- Oracle数据库的基本操作指令
- 前端页码栏的制作
- FastDfs的使用
- Redux与React-看懂你就懂了
- linux常见配置
- Runtime的使用7 【动态添加方法】
- QTableWidget自动调整列宽和行高
- JAVA实现远程执行SSH2主机的SHELL命令
- sqlserver触发器的使用
- php 获取当前目录
- 3.2 将工具栏添加到工具窗口
- Java WebSocket客户端实现