随笔分类 - React
摘要：先上一张经典图为敬 redux-saga 是一个用于管理redux应用异步操作代替 redux-thunk 的中间件 集中处理 redux 副作用问题。reducer负责处理action的更新，saga负责协调那些复杂或者异步的操作 使用 generator 函数执行异步，generator不是线程
阅读全文
摘要："thunk" 是什么? 单词“thunk”是一个编程术语，意思是“一段做延迟工作的代码”。不需要现在执行一些逻辑，我们可以编写一个函数体或代码，用于以后执行这些工作。 特别是对于Redux来说，“thunks”是一种编写带有内部逻辑的函数的模式，它可以与Redux存储的调度和getState方法交
阅读全文
摘要：前言 React和Redux都遵守组件状态为不可变（immutable）的理念，使用 immer 可将对象设置为 immutable，防止意外的修改。 Immer 是一个支持柯里化，仅支持同步计算的工具，所以非常适合作为 redux 的 reducer 使用。 import produce from
阅读全文
摘要：redux 数据流 组件通过 store.dispatch(action) 发起一个 action store 接收到 action 通过 reducer 计算出新的 state store 返回新的 state 值给组件 数据流 作为 Flux 的一种实现形式，Redux 自然保持着数据流的单向性
阅读全文
摘要：legacy 模式：ReactDOM.render(<App />, rootNode)。这是当前 React App 使用的方式。 blocking 模式：ReactDOM.createBlockingRoot(rootNode).render(<App />)。目前正在实验中，作为迁移到 con
阅读全文
摘要：案例 // 新建文章组件 function EditArticle() { const [title, setTitle] = useState(""); const [content, setContent] = useState(""); const [other, setOther] = us
阅读全文
摘要：书接上文，从 scheduleWork 开始 scheduleWork 主要初始化 FiberRoot Time相关字段 function scheduleWork(fiber: Fiber, expirationTime: ExpirationTime) { // fiber:FiberNode,
阅读全文
摘要：书接上文，从legacyRenderSubtreeIntoContainer - unbatchedUpdates看起 // Initial mount should not be batched. unbatchedUpdates(() => { // parentComponent = null
阅读全文
摘要：ReactDOM.render(<List />,document.getElementById('container')); 以这个demo作为例子，ReactDOM.render 作为入口 packages/react-dom/src/ReactDOM.js render( element: R
阅读全文
摘要：最常见的 Web 类示例之一: TodoList = Todo list + Add todo button React 表示法 按照 React 官方指导意见, 如果多个 Component 之间要发生交互, 那么状态(即: 数据)就维护在这些 Component 的最小公约父节点上, 也即是 <
阅读全文
