友人C君的博客

图片的优化base64首先盲目使用base64并不能带来性能的优化，首先图片转成base64之后，体积会增大1/3，虽然减少了图片带来的http请求，但如果base64体积过大，会造成html文件体积臃肿，适得其反。在webpack配置上，默认图片转成base64的体积一般都是3k以内，所以对小图进行base64转码是优化http请求，保证页面加速渲染，加快页面加载速度。svg小图除了可以使用base64之外，还能使用svg格式的文件来取代图形字体存在本地，其中svg的效果更优，因为是矢量图不

前言在React16.8之前，React通过this.state来访问state，通过this.setState()方法来更新state。当this.setState()被调用的时候，React会重新调用render方法来重新渲染UI。state是React中的重要概念。React是通过状态管理来实现对组件的管理。那么，React是如何控制组件的状态，又是如何利用状态来管理组件的呢？一、合成事件中setState在jsx中常见的onClick、onChange这些都是合成事件class A

React核心开发团队一直都努力地让React变得更快。在React中可以用来优化组件性能的方法大概有以下几种:组件懒加载(React.lazy(...)和<Suspense />) Pure Component shouldComponentUpdate(...){...}生命周期函数本文还会介绍React16.6加入的另外一个专门用来优化函数组件(Functional Component)性能的方法:React.memo。无用的渲染组件是构成React视图的一个基本单元。.

【redux】1、定位：它是将flux和函数式编程思想结合在一起形成的架构；2、思想：视图与状态是一一对应的；所有的状态，都保存在一个对象里面；3、API：store：就是一个数据池，一个应用只有一个；　　state：一个 State 对应一个 View。只要 State 相同，View 就相同。action：State 的变化，会导致 View 的变化。但是，用户接触不到 State，只能接触到 View。所以，State 的变化必须是 View 导致的。Action 就是 Vi.

react 服务端渲染原理不复杂，其中最核心的内容就是同构。node server 接收客户端请求，得到当前的req url path,然后在已有的路由表内查找到对应的组件，拿到需要请求的数据，将数据作为 props 、context或者store 形式传入组件，然后基于 react 内置的服务端渲染api renderToString() or renderToNodeStream() 把组件渲染为 html字符串或者 stream 流, 在把最终的 html 进行输出前需要将数据注入到浏览器端(注.

在 React Fiber 架构面世一年多后，最近 React 又发布了最新版 16.8.0，又一激动人心的特性：React Hooks 正式上线，让我升级 React 的意愿越来越强烈了。在升级之前，不妨回到原点，了解下人才济济的 React 团队为什么要大费周章，重写 React 架构，而 Fiber 又是个什么概念。二、React 15 的问题在页面元素很多，且需要频繁刷新的场景下，React 15 会出现掉帧的现象。请看以下例子：https://claudiopro.github.io/..

React中，数据流是自顶向下的，如果兄弟组件通信，那就得先状态提升到父组件但我们平时开发过程中，经常碰到组件树层级很深，如果不同层级的组件需要使用同一份数据，那从顶层组件分别传递props的方案肯定是很麻烦的而且太深的props层级对后续进行维护追溯数据源来说也是不好的一种解决方式因此context的使用场景就是：在组件树中，不同层级需要访问相同的数据源时，可以利用context，进行组件之间的通信React.context先看这么一个例子：// context.jsimpor

React中的setState是异步的吗？setState是同步执行的！但是state并不一定会同步更新（异步更新和同步更新都存在）setState()中有个特别重要的布尔属性isBatchingUpdates（默认为false），它决定了state是同步更新还是异步更新。异步更新：合成事件 钩子函数setState 只在合成事件和钩子函数中是“异步更新”的。异步更新的背后，是同步代码处理（"合成事件和钩子函数"的调用在"更新"之前）。异步是为了实现批量更新的手段，也是React性能优

import react, { useState, useEffect, useLayoutEffect, useRef } from "react";// useState : 代替class组件的内部stateconst [data, setData] = useState({});// useEffect : 代替生命周期 componentDidMount,componentDidUpdateuseEffect(() => { const handle = () => .

安装 Dva 依赖通过 npm 安装 dva-cli 并确保版本是0.9.1或以上。npm install dva-cli -g定义 Model新建 modelmodels/products.js：export default { namespace: 'Test', state: { name: 'chen', }, effects: { *query({ payload }, { call, put }) { yie...

Redux 的概念Redux 是 JavaScript应用的状态容器，提供可预测化的状态管理；Javascript应用：是指任何Javascript构建的项目，而不是仅仅是React框架构建的项目，当然他们搭配用起来更加顺手； 状态容器：react项目中的state抽离出来集中在对象树状结构中store(状态容器)，一个项目只能有一个store(状态容器)； 可预测性：对于状态的更...

路由跳转 首先在项目中引入react-router的拓展npm install --save react-router-dom然后写一个组件作为跳转路由时需要显示的组件然后在使用路由跳转的地方引入然后在标签里通过 Router和Route放置组件修改路由地址，即可显示对应组件也可以使用 <Link> 标签里的to属性之间进行跳转（&...

利用生命周期函数进行页面优化

父组件向子组件传值在父组件中直接将值写入组件标签参数中，然后写入数据即可而子组件中接收此参数直接使用this.props.参数名 即可拿到父组件传递的参数。例子：子组件调用父组件的函数与Vue的$emit不同的是，React的子组件调用父组件的方式同样是使用this.props.函数名，在子组件中通过this.props.函数名（参数）调用在父组件...

1.直接用bind绑定 （可以传参数）Function.prototype.bind(thisArg [, arg1 [, arg2, …]])是ES5新增的函数扩展方法，bind()返回一个新的函数对象，该函数的this被绑定到thisArg上，并向事件处理器中传入参数//params参数<div onClick={this.showModal.bind(this, par...

使用 create-react-app 快速构建 React 开发环境create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。create-react-app 自动创建的项目是基于 Webpack + ES6 。执行以下命令创建项目：cnpm install -g create-react-appcreate-r...

React官网React 的介绍与Vue的对比