React初学笔记

前言
对于新的知识(无论理解知识的途径是官方文档、博文甚至或是某个评论)有些时候刚学的时候看的知识讲解以为会用了就是看懂了,但写了代码之后再看发现又是一番体味,而自己总结时翻看以前的笔记又是不一样的感觉。于是在这里记录下我学习react过程中一些纠结的点或是让我醍醐灌顶的一些理解,希望也能帮助到各位。

1. 木偶组件和容器组件

木偶组件Presenter Component : 给啥输出啥//也可理解为UI组件
容器组件:Container Component : 在容器组件中准备好数据和一些callbac函数,处理一些事件或管理内部的状态 , 个人理解是中心枢纽及加工厂的作用

在redux中充当容器组件作用的就是Connected Component : 这类组件和Redux的store进行了连接,并且获取到store的数据之后进行一些操作后传递给子组件即定义一个Container Components,然后把一些Presenter Components都作为他的子组件,父组件关注如何工作,子组件关注如何展现。

当组件只负责展示如header标题栏等,就做成UI组件即可。
当组件既有UI又有业务逻辑:将它拆分成:UI组件 + 容器组件。UI组件外面是容器组件,容器组件负责与外部通信,将数据传给后者,由后者渲染出视图。


2. props和state

区别:

state: state是组件自己管理数据,控制自己的状态,可变,相当于组件的私有属性,表示临时的内部的状态数据。通过this.setState()方法来修改state,constructor是唯一能够初始化的地方

props: props是外部传入的数据参数(如父组件向子组件传递数据),只能通过外部组件主动传入新的props来重新渲染子组件,否则子组件的props不会改变。通常存储一些方法,一些可能需要存库的长期数据和一些需要传递和共享的数据

联系:
一个组件的显示形态可以由数据状态和外部参数所决定,外部参数也就是props,而数据状态就是state。
没有state的叫做无状态组件,有state的叫做有状态组件;
多用props,少用state。也就是多写无状态组件。


3. react与redux关系

React本身是个状态机,也就是说组件是state的表现形式。UI = F(data)
那么Redux提供了一个全局的唯一的状态树,是不是就不需要组件本身的state了呢?当然不是,需要共享的或者数据很复杂需要抽取放到公共数据管理平台处理才把数据委托给redux管理嘛。

Redux的全局唯一的state(全局唯一状态树):存放的是长期数据(并不一定要求是长期数据)和用于在多个组件中共享的数据。

Redux和React的关系:
1.React从Redux的state读取数据
2.React能dispatch分发actions到Redux,Redux的reducer来返回一个新的state

全局状态树的构建:通过 reducer
数据自顶向下移动,组件可以选择将其状态作为属性传递给其子组件:如 FormattedDate 组件将在其属性中接收到 date 值,但不知道它是来自 Clock 状态、还是来自 Clock 的属性、亦或手工输入。这就是单向数据流,任何状态始终由某些特定组件所有,并且从该状态导出的任何数据或 UI 只能影响树中下方的组件

关于redux:
使用Redux做状态管理:当我们谈论redux时,我们可以看到很多关于redux的优点总结有:共享组件状态、组件间通信,统一记录/管理 action,time travel/undo/redo 等等功能。不过那些都是次要的,Redux 最重要的优点是可预测性,对于既定输入一定会产生既定输出。

可预测性有什么优点呢?最直观的优点就是易于测试,如果没有 I/O 当然最好,如果有的话需要加一层 middleware 处理写 mock 也不难;其次是数据的流动会非常清晰,这点搞一个 redux-devtool 就可以看出来;第三点是你可以先写数据结构和业务逻辑再写 UI.

组件生命周期:

这里写图片描述


参考链接:

在 2017 年学习 React + Redux 的一些建议(上篇)
React 与 Redux 教程(二)Redux的单一状态树完全替代了React的状态机?
react + redux 完整的项目,同时写一下个人感悟
那些入坑 React 前没有人会提醒你的事


后记:

前端路变幻无穷,不仅前端,互联网都是这样,或者不只互联网,做任何事都是这样,不会一成不变,学个知识就一劳永逸。面对变化,希望我能一直保持着初学者的好奇,拼搏劲,思考力,还有”不谙套路”,互勉。

猜你喜欢

转载自blog.csdn.net/young_Emily/article/details/79228985
今日推荐