jsx

谁都没有看见过风，更不用说你和我了。但是当纸币在飘的时候，我们知道那是风在数钱。 React 影响着我们工作的方方面面，我们每天都在使用它，只窥其表却难以窥其里。正所谓看不如写，本篇文章的目的就是从原理层面探究 React 是如何工作的。 工具 在写文章之前，为了方便理解，我准备了一个懒人调试仓库 simple_react ，这个仓库将 benchmark 用例（只有两个 ^ ^）和 React 源码共同放在 src 文件夹中，通过 snowpack 进行热更新，可以直接在源码中加入 log 和 debuger 进行调试。当然这里的“源码”并不是真的源码，因为 React 源码中充斥着巨量的 dev 代码和不明确的功能函数，所以我对源码进行了整理，用 typescript 对类型进行了规范，删除了大量和核心流程无关的代码（当然也误删了一些有关的 ^ ^）。 如果你只是希望了解 React 的运行流程而不是写一个可以用的框架的话，那么这个仓库完全可以满足你学习的需要。当然，这个仓库基于 React16.8 ，虽然这个版本并不包括当前的航道模型 Lane 等新特性，但是是我个人认为比较稳定且更适合阅读的一个版本。 （如果希望调试完整的源码，也可以参考 拉取源码 通过 yarn link 来进行 debug） 文章结构 fiber 架构设计及首次渲染流程 事件委托机制 状态的更新 时间片

React 是一个 Facebook 开源的，用于构建用户界面的 JavaScript 库。 React 目的在于解决：构建随着时间数据不断变化的大规模应用程序。 其中 React 合成事件是较为重要的知识点，阅读完本文，你将收获： 合成事件的概念和作用； 合成事件与原生事件的 3 个区别； 合成事件与原生事件的执行顺序； 合成事件的事件池； 合成事件 4 个常见问题。 接下来和我一起开始学习吧~ 一、概念介绍 React 合成事件（SyntheticEvent）是 React 模拟原生 DOM 事件所有能力的一个事件对象 ，即浏览器原生事件的跨浏览器包装器。它根据 W3C 规范 来定义合成事件，兼容所有浏览器，拥有与浏览器原生事件相同的接口。 看个简单示例： const button = <button onClick={handleClick}>Leo 按钮</button> 在 React 中，所有事件都是合成的，不是原生 DOM 事件，但可以通过 e.nativeEvent 属性获取 DOM 事件。 const handleClick = (e) => console.log(e.nativeEvent);; const button = <button onClick={handleClick}>Leo 按钮</button> 学习一个新知识的时候

Jest同时支持ts和react jsx TypeScript + Jest + React-Testing-Library： https://www.jianshu.com/p/1bef70cfe712 jest配置文件 // jest.config.js module.exports = { // preset: 'ts-jest', // testEnvironment: 'node', // roots: ['<rootDir>/src'], transform: { '^.+\\.tsx?$': 'ts-jest', }, testRegex: '^.+\\.test\\.(ts|tsx)$', moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], moduleNameMapper: { "\\.(css|less)$": "identity-obj-proxy", }, }; @testing-library/react的query api： https://testing-library.com/docs/dom-testing-library/api-queries ByLabelText ByPlaceholderText ByText 。。。 @testing-library

故事背景 [1] 博客笔记结合《React快速上手开发》再次系统地、全面地走一遍。 [2] React JS Tutorials ：包含了JS --> React --> Redux --> Mobx 项目部署 着眼于ful-stack全局，了解前后端的部署，之后才能深刻理解react的角色与位置。 1. 服务器部署 [AWS] Deploy react project on EC2 2. 用户权限管理 [AWS] OAuth2.0 [AWS] User management [AWS] Amazon Cognito 3. 这就是未来后端的趋势 [AWS] Serverless React基本路线 一、静态的html变为了动态生成 React自己的html表达方式 <script> ReactDOM .render( React.DOM . h1 ( { id : "my-heading" }, React.DOM . span ( null , React.DOM . em ( null , "Hell" ), "o" ), " world!" ), document.getElementById( 'app' ) ); </script> 命名冲突：class, for, style <script> ReactDOM.render( /* // COUNTEREXAMPLE

组件 1. 无状态组件 在React中，组件的名字必须用大写字母开头，而包含该组件定义的文件名也应该是大写字母(便于区分，也可以不是)。 无状态组件是纯展示组件，仅仅只是用于数据的展示，只根据传入的props来进行展示，不涉及到state状态处理，通过函数式的方式来创建一个无状态函数式组件(大多数组件都是无状态组件，通过简单的组合可以构建成其他的组件，最后合并成一个大的应用)。 无状态函数式组件是一个只带有render方法的组件，通过函数形式或者箭头函数形式创建，该组件无state状态。 import React from "react"; //创建方式一,相当于es5的函数声明的方式创建 function NoState (props) { return ( <div>this is NoState Component</div> ) } //创建方式二,相当于es5的函数表达式的方式创建 const NoState = (props) => { return ( <div>this is Nostate Component</div> ) } export default NoState 无状态函数式组件没有组件实例化的过程，成为一个render方法的函数来执行，减少分配的内存，使整体渲染性能得到提高，因此展示数据的组件优先选择这种方式。 无状态组件没有实例化得过程

什么是React A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES 用来构建UI的 JavaScript库 React 不是一个 MVC 框架，仅仅是视图（V）层的库 特点 1 使用 JSX语法 创建组件，实现组件化开发，为函数式的 UI 编程方式打开了大门 2 性能高的让人称赞：通过 diff算法 和 虚拟DOM 实现视图的高效更新 3 HTML仅仅是个开始 为什么要用React 1 使用组件化开发方式，符合现代Web开发的趋势 2 技术成熟，社区完善，配件齐全，适用于大型Web项目（生态系统健全） 3 由Facebook专门的团队维护，技术支持可靠 4 ReactNative - Learn once, write anywhere: Build mobile apps with React 5 使用方式简单，性能非常高，支持服务端渲染 6 React非常火，从技术角度，可以满足好奇心，提高技术水平；从职业角度，有利于求职和晋升，有利于参与潜力大的项目 React中的核心概念 1 虚拟DOM（Virtual DOM） 2 Diff算法（虚拟DOM的加速器，提升React性能的法宝） 虚拟DOM（Vitural DOM） React将DOM抽象为虚拟DOM，虚拟DOM其实就是用一个对象来描述DOM，通过对比前后两个对象的差异

[TOC] React 了解 React 是一个用于构建用户界面的 JAVASCRIPT库。 React 主要用于构建UI，可以理解为React 是 MVC 中的V(视图)。 React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站。 React 拥有较高的性能，代码逻辑较为简单。 React 特点 1.声明式设计 —React采用声明范式，可以轻松描述应用。 2.高效 —React通过对DOM的模拟，最大限度地减少与DOM的交互 3.灵活 —React可以与已知的库或框架很好地配合。 4.JSX —JSX是 JavaScript 语法的扩展。React开发不一定使用 JSX，官方建议使用。 5.组件 —通过React 构建组件，是的代码更加容易得到复用，能够很好的应用在大项目的开发中。 6.单向响应的数据流 —React实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。 快速构建一个React开发环境 1、创建本地文件夹，保存React项目 2、通过控制台输入 npm install -g create-react-app 使用npm安装create-react-app 3、完成上面的步骤之后，输入 create-react-app my-app 来创建一个项目 my-app 是创建出来的React 项目。 4