react
文章平均质量分 87
nie-ny
小小的前端
展开
-
多层级使用useContext
useContext作用Context 提供了一个无需为每层组件手动添加 props,就能在组件树间进行数据传递的方法。Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据,例如当前认证的用户、主题或首选语言。useContext使用createContextconst P = createContext(defaultValue);先使用 createContext 创建一个 Context 对象。就能使用 useContext 订阅了这个 Context 对象。这原创 2021-06-02 10:27:49 · 661 阅读 · 0 评论 -
实现一个简单的react框架 -- (Fiber架构)
简介本文将从头开始编写一个简单的类 react 框架。用于理解 fiber 原理和 hooks 的实现,轻松地深入React代码库。React.createElement我们从编写createElement开始,这个函数主要用于把JSX转换成虚拟DOM(js对象)。这里我们使用@babel/plugin-transform-react-jsx这个插件自动转换。// jsxconst element = ( <div id="name"> <a>name</原创 2021-06-02 10:25:03 · 482 阅读 · 0 评论 -
实现一个简单的react框架 -- (无Fiber架构)
简介本文教你如何实现一个类 react 15 的框架,在实现的过程中了解 react 的生命周期函数,异步setState 这些是如何实现的。JSXJSX 是一种 JavaScript 的语法扩展,运用于React架构中。在 react 中 jsx 会被转换为虚拟DOM。什么是虚拟DOM呢。简单理解就是一个格式固定了的对象。const title = <div className="name">111</div>;比如这段代码在 react 编译的时候,会转换为一个方法原创 2021-06-02 10:24:10 · 196 阅读 · 1 评论 -
React fiber 架构浅析
React fiber架构简介原创 2021-01-07 14:52:22 · 1230 阅读 · 4 评论 -
基础-搭建react项目教程
前言本文详细的介绍如何从头开始搭建一个react项目,帮助新人了解项目搭建流程和打包流程。需要注意包版本问题,不同版本代表着不同的代码。如果包版本不同启动项目时可能会出现未知错误。目录说明└─config #webpack配置文件 │ webpack.build.config.js #webpack生产配置文件 │ webpack.dev.config.js #webpack开发配置文件│ d原创 2021-06-02 10:20:22 · 707 阅读 · 2 评论