Latest Posts

文章

记录技术、生活和一些阶段性的想法。

记录人生69376 阅读

第一辆自行车

记录第一辆自行车,喜德盛黑客380 下班心血来潮扫了个共享单车直奔喜德盛线下店。 本来是想看看黑客350的,结果店里没有。看了看黑客380,加点预算直接拿下。(本人程序员,对黑客二字感觉莫名亲近) 前两天骑得屁股超级痛。后面买了坐垫骑了几天,现在拿掉坐垫好像感觉不到痛了。 距离现在买车到现在已经骑行了一周,上班通勤来回十余公里。一开始单程需要四十来分钟,并且腿酸屁股痛。现在只需要不到三十分钟了,并…

阅读全文
思考感悟52171 阅读

必须准备好才能出发吗?

今天阅读了一下《穷爸爸富爸爸》。才看了第一章就深深被触动了。这本书讲得非常通俗易懂,让我明白“为钱工作”还是“让钱为我工作”两种观念之间的鸿沟般的差距。结合这几年打工的状况,我被深深的带入了其中。 触动之下,我在东方财富开了个股票账户。虽然身边人好像都在用同花顺,但是它的账户要到券商开户,没有自己的券商,让我难以选择。加之我在东方财富旗下的天天基金买过几年的基金,App也很好用,所以就选择了东方财…

阅读全文
React系列1770481 阅读

React 中对响应式的理解

最近在专研 React 文档,遇到文档中这样的一句话让我陷入了沉思:“在组件主体中声明的所有变量都是响应式的。” 基于 Vue,我对响应式的理解是这样的:响应式变量是被 Vue 的响应式系统(基于 Proxy)追踪的,只要它们发生变化,Vue 就会自动更新视图。比如通过 ref() 或 reactive() 创建的对象,计算属性 computed,甚至是 watchEffect() 等副作用监听器…

阅读全文
React系列1673892 阅读

React系列八:脱围机制

有些组件可能需要控制和同步 React 之外的系统。例如,你可能需要使用浏览器 API 聚焦输入框,或者在没有 React 的情况下实现视频播放器,或者连接并监听远程服务器的消息。在本章中,你将学习到一些脱围机制,让你可以“走出” React 并连接到外部系统。大多数应用逻辑和数据流不应该依赖这些功能。 当你希望组件“记住”某些信息,但又不想让这些信息 触发新的渲染 时,你可以使用 ref 。 u…

阅读全文
React系列1080101 阅读

React系列七:Reducer 和 Context

Reducer 可以整合组件的状态更新逻辑。Context 可以将信息深入传递给其他组件。你可以组合使用它们来共同管理一个复杂页面的状态。 这里的tasksReducer是我们用于处理tasks的方法,如新增,删除,修改等。 initialTasks是初始化tasks的默认值。 tasks是任务列表、dispatch用于调用tasksReducer来操作tasks。 接下来需要将tasks和dis…

阅读全文
React系列1515103 阅读

React系列六:Context

通常来说,你会通过 props 将信息从父组件传递到子组件。但是,如果你必须通过许多中间组件向下传递 props,或是在你应用中的许多组件需要相同的信息,传递 props 会变的十分冗长和不便。Context 允许父组件向其下层无论多深的任何组件提供信息,而无需通过 props 显式传递。 这里的1是默认值 这里需要用useContext来使用LevelContext 注意!这个示例还不能运行。因…

阅读全文
React系列224492 阅读

React系列五:状态管理

React 控制 UI 的方式是声明式的。你不必直接控制 UI 的各个部分,只需要声明组件可以处于的不同状态,并根据用户的输入在它们之间切换。这与设计师对 UI 的思考方式很相似。 通俗的说就是根据一个状态来判断展示哪一个组件。 React推荐使用尽量简单但是意义明确的state: 1. 如果两个 state 变量总是一起更新,请考虑将它们合并为一个。 2. 仔细选择你的 state 变量,以避免…

阅读全文
React系列135392 阅读

React系列四:对象更新

state 中可以保存任意类型的 JavaScript 值,包括对象。但是,你不应该直接修改存放在 React state 中的对象。相反,当你想要更新一个对象时,你需要创建一个新的对象(或者将其拷贝一份),然后将 state 更新为此对象。 在 React 中,状态是不可变的(immutable)。React 不会深入比较对象内部的属性变化,而是通过引用是否变化 来判断是否需要更新组件。 Vue…

阅读全文
React系列85087 阅读

React系列三:React事件

事件处理函数还将捕获任何来自子组件的事件。通常,我们会说事件会沿着树向上“冒泡”或“传播”:它从事件发生的地方开始,然后沿着树向上传播。 如果你点击任一按钮,它自身的 onClick 将首先执行,然后父级 <div 的 onClick 会接着执行。 在 React 中所有事件都会传播,除了 onScroll,它仅适用于你附加到的 JSX 标签。 事件处理函数接收一个 事件对象 作为唯一的参数。按照…

阅读全文
React系列134186 阅读

React系列二:基础概念

React 组件是常规的 JavaScript 函数,但 组件的名称必须以大写字母开头,否则它们将无法运行! 在看到标签时,小写为html标签,大写为自己的组件。 返回语句可以全写在一行上,但是,如果你的标签和 return 关键字不在同一行,则必须把它包裹在一对括号中。没有括号包裹的话,任何在 return 下一行的代码都 将被忽略!不过也要注意:()是(),<\</是<\</,括号只是用于包裹…

阅读全文