create-react-app是一个react的cli脚手架+构建器，我们可以基于CRA零配置直接上手开发一个react的SPA应用。 通过3种方式快速创建一个React SPA应用: 1. npm init with initializer ( npm 6.1+ ) 2. npx with generator ( npm 5.2+ ) 3. yarn create with initializer ( yarn 0.25+ ) 例如我们新建一个叫my-app的SPA: my-app ├── README.md ├── node_modules ├── package.json ├── .gitignore ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json └── src ├── App.css ├── App.js ├── App.test.js ├── index.css ├── index.js ├── logo.svg

前两年服务端渲染和同构的概念火遍了整个前端界，几乎所有关于前端的分享会议都有提到。在这年头，无论你选择什么技术栈，不会做个服务端渲染可能真的快混不下去了！最近刚好实现了个基于 React&Redux 的同构直出应用，赶紧写个文章总结总结压压惊。 前言 在了解实践过程之前，让我们先明白几个概念（非新手可直接跳过）。 什么是服务端渲染（SERVER-SIDE RENDERING） 服务端渲染，又可以叫做后端渲染或直出。 早些年前，大部分网站都使用传统的 MVC 架构进行后端渲染，就是实现一个 Controller，处理请求时在服务端拉取到数据 Model，使用模版引擎结合 View 渲染出页面，比如 Java + Velocity、PHP 等。但随着前端脚本 JS 的发展，拥有更强大的交互能力后，前后端分离的概念被提出，也就是拉取数据和渲染的操作由前端来完成。 关于前端渲染还是后端渲染之争，可以看文章后面的参考链接，这里不做讨论。这里照搬后端渲染的优势： * 更好的首屏性能，不需要提前先下载一堆 CSS 和 JS 后才看到页面 * 更利于 SEO，蜘蛛可以直接抓取已渲染的内容

16.6之前，函数组件没有像 shouldComponentUpdate 这样的方法，也没有类似 PureComponent 这种解决方案，避免不了函数组件里面所有的代码再次的执行，要依靠外面的条件渲染来控制，或者是高阶组件。之前的话，选择使用函数组件的情况是一些比较简单的又比较纯的组件，只是负责展示的。而且函数组件最终编译babel结果是只执行 createElement 那一步；class组件一样有生命周期要实例化，最终经过Babel成es5代码的时候还很长 REACT.MEMO 当16.6的memo问世，函数组件就有了类似 PureComponent 和 shouldComponentUpdate 的解决方案，memo的使用方法： const C = (props) => { return <section>那一夜{props.name}真帅</section> } exportdefault React.memo(C)

概述 项目中需要对列表实现拖拽排序，同时要支持点击选中和删除功能。 查看 React DnD 例子的源码，包含ES6、ES7的实现。

前言 react hook是继16.6的Suspense、lazy、memo后的又一巨大的令人兴奋的特性。然后有各种文章说了hook的优缺点，其中缺点包括：没有直接替代getSnapshotBeforeUpdate、componentDidUpdate生命周期的hook、不能像class组件那样写this、函数太大。这只是表面的现象，只要稍微思考一下，hook其实是无所不能的，我甚至相信未来挑不出hook的毛病来。今天手把手带大家过一遍如何实现class组件特性。 基本用法可见官网，阅读本文需要先了解 useState 、 useEffect 、 useRef 、 useLayoutEffect 的使用方法。本文核心hook—— useRef ，本文也算是一篇 useRef 的应用文章。当你知道核心是基于 useRef 的时候，或许已经想到实现办法了，很好，我们心有灵犀 「握个手」 USEREF

据说，这个hook可以模拟class组件的三个生命周期 前言 官网已经介绍过，这里再啰嗦一次。 useEffect 是一个用来执行副作用hook，第一个参数传入一个函数，每一次render之后执行副作用和清除上一次副作用，该函数的返回值就是清除函数。第二个参数是一个数组，传入内部的执行副作用函数需要的依赖，当这几个依赖有一个要更新，effect里面也会重新生成一个新的副作用并执行副作用。如果没有更新，则不会执行。如果第二个参数不传，那么就是没有说明自己有没有依赖，那就是每次render该函数组件都执行。 很明显， useEffect 第一个参数可以模仿 didmount 、 didupdate ，它的返回值可以模仿 willunmount CLASS组件生命周期模拟 "模仿生命周期，useEffect第二个参数传个空数组，无依赖，只执行一次，相当于didmount。如果要区分生命周期，不传第二个参数，每次都会跑，相当于didupdate。加个mount标记一下，里面用if判断一下，即可以达到模拟生命周期的效果" 很多人都会想到这个办法模拟，于是我们试一下看看： let mount;

背景 考虑到移动端性能，腾讯企鹅辅导移动端项目使用了更为轻量的 preact(7KB) 及其对应配套 preact-router 等， 考虑到 preact 对 react 的兼容不全、生态远不如 react 等问题，且 react 16 相当吸引人的特性包括： 1. 体积减少 * react is 5.3 kb (2.2 kb gzipped), down from 20.7 kb (6.9 kb gzipped). * react-dom is 103.7 kb (32.6 kb gzipped), down from 141 kb (42.9 kb gzipped). * react + react-dom is 109 kb (34.8 kb gzipped), down from 161.7 kb (49.8 kb gzipped). 2. 错误处理, 可通过定义一个组件专门捕获错误，当页面部分组件报错时兼容，更友好的用户体验 3. lazy 提供动态 import 组件，Suspense 实现代码分割 4. hook 的出现

一直以来，表单对于前端来说都是一个不得不面对的坑。而对于设计一个表单组件来说，主要需要考虑以下三点： * 各个元素如何排版布局 * 管理各个元素的值 * 表单验证（即时校验及提交的全部校验） 目前已经有了一批优秀的 form 表单解决方案，但是要解决上述的三大问题，都比较费劲，于是搞了个 react-form-next [https://www.npmjs.com/package/react-form-next] ，力求将整个表单组件所涉及到的问题都简化点。 简单演示 以下图的一个简单的表单为例： 布局采用传统的一行一个表单项，验证条件如下： * 用户名默认为ycxu，不允许为空 * 邮箱不能为空，邮箱格式验证 * 年龄不能为空，只能是数字，且范围为18-30之间的数字。除此以外，onChange 的时候要立即校验。 * 提交之前校验全部

前言 一开始react团队对外宣布hook 的时候，一眼看上去，觉得肯定proxy或者getter实现的，然后在函数组件外面包一层class extend React.Component。读setState钩子的第一个return结果就返回state，第二个结果就是封装了setState。后来发布了，看了一下代码，原来是维护一个队列（可以说很像数组，也可以说维护一个链表）。 RENDERWITHHOOKS的整个过程 在源码里面，renderWithHooks函数是渲染一个组件会调用的，跟hook相关的操作都在这里之后。 比如这段代码： exportdefault () => { const [n, setn] = useState(1); const [age, setAge] = useState(10); const [man, setSex] = useState(true); return ( <div>

0. 前言 preact作为备胎，但是具有体积小，diff算法优化过的特点，简单活动页用上它是不错的选择。但是考虑到react令人兴奋的新特性，preact并没有按时更新去完全支持它，更严重的是一些babel插件、一些库配合preact会有问题。所以，还是不得不迁移了。 如何迁移？package.json直接修改版本，删掉preact，重装，完事！ too young 1. 从ALIAS改起 首先，一般是 这样子 [https://preactjs.com/guide/switching-to-preact] 接入preact的，使得我们代码里面毫无感觉我们用的是preact。在webpack的alias里面配置： alias: { react: 'preact-compat', 'react-dom': 'preact-compat' }, 所以，第一步先把这个去掉 2. 语法上 1. preact的元素数组可以不写key，切换回来必然警告很多，需要把key补上render() { return ( [

原文链接： Why Do React Elements Have a $$typeof Property? [https://overreacted.io/why-do-react-elements-have-typeof-property/] 你可能以为你在编写的是JSX： <marqueebgcolor="#ffa7c4">hi</marquee> 但是实际上，你调用的是一个函数。 React.createElement( /* type */'marquee', /* props */ { bgcolor: '#ffa7c4' }, /* children */'hi' ) 这个函数给你返回一个Object对象，我们叫这个对象为React元素。它告诉React接下来要渲染什么。你编写的组件将组成一个组件树。 { type: 'marquee', props: { bgcolor: '#ffa7c4', children: 'hi', }, key: null, ref: null,

接着上一篇： 如何使用 React 构建自定义日期选择器(2) DATEPICKER 组件 构建 DATEPICKER 组件 要开始构建 Datepicker 组件，请将以下代码片段添加到 src/components/Datepicker/index.js 文件。 import React from"react"; import PropTypes from"prop-types"; import Calendar from"../Calendar"; import * as Styled from"./styles"; import { isDate, getDateISO } from"../../helpers/calendar"; classDatepickerextendsReact.Component{ state = { date: null, calendarOpen: false }