Web全栈架构师（二）——React学习笔记（3）

最新推荐文章于 2022-03-28 10:30:52 发布

讲文明的喜羊羊拒绝pua

最新推荐文章于 2022-03-28 10:30:52 发布

阅读量265

点赞数

分类专栏：前端框架

本文链接：https://blog.csdn.net/yangwei234/article/details/88870135

版权

前端框架专栏收录该内容

5 篇文章 2 订阅

订阅专栏

项目实战

资源

Ant Design Pro 使用：https://pro.ant.design/docs/getting-started-cn
Ant Design Pro 预览：https://preview.pro.ant.design/dashboard/analysis
antd 布局组件：https://ant.design/components/layout-cn/
安装：npm install ant-design-pro --save

页面布局

使用 antd 布局组件 Layout、菜单 Menu
新建 src/layouts/index.js

import { Layout, Menu } from "antd";
import Link from "umi/link";
import styles from "./index.css";
import React, { Component } from "react";
import { Icon, Badge, Dropdown } from "antd";
import { connect } from "dva";

const { Header, Footer, Content } = Layout;

export default class extends Component {
  onItemClick = item => {
    console.log(item);
  };
  render() {
    const selectedKeys = [this.props.location.pathname];
    return (
      // 上中下布局
      <Layout>
        {/* 页头 */}
        <Header className={styles.header}>
          <img className={styles.logo} src="https://img.kaikeba.com/logo-new.png"/>
          <Menu theme="dark" mode="horizontal" selectedKeys={selectedKeys}
            style={{ lineHeight: "64px", float: "left" }}>
            <Menu.Item key="/">
              <Link to="/">商品</Link>
            </Menu.Item>
            <Menu.Item key="/users">
              <Link to="/users">用户</Link>
            </Menu.Item>
            <Menu.Item key="/about">
              <Link to="/about">关于</Link>
            </Menu.Item>
          </Menu>
          {/* 购物车信息 */}
          ...
        </Header>
        {/* 内容 */}
        <Content className={styles.content}>
          <div className={styles.box}>{this.props.children}</div>
        </Content>
        {/* 页脚 */}
        <Footer className={styles.footer}>开课吧</Footer>
      </Layout>
    );
  }
}

用户登录认证

在这里插入图片描述

使用 ant-design-pro 的 Exception 组件构建404页面 src/pages/404.js：

import {Exception} from 'ant-design-pro'
export default function() {
  return (
    <Exception type="404" backText="返回首页"></Exception>
  );
}

使用 ant-design-pro 的 Login 组件构建登录页面 src/pages/login.js：

import React, { Component } from "react";
import styles from "./login.css";

import { Login } from "ant-design-pro";
import { connect } from "dva";

const { UserName, Password, Submit } = Login;

@connect()
export default class extends Component {
  onSubmit = (err, values) => {
    console.log("用户输入：", values);
    if (!err) {
      // 校验通过，提交登录
      this.props.dispatch({ type: "user/login", payload: values });
    }
  };
  render() {
    return (
      <div className={styles.loginForm}>
        {/* logo */}
        <img className={styles.logo} src="https://img.kaikeba.com/logo-new.png"/>
        {/* 登录表单 */}
        <Login onSubmit={this.onSubmit}>
          <UserName name="username" placeholder="kaikeba" rules={[{ required: true, message: "请输入用户名" }]}/>
          <Password name="password" placeholder="123" rules={[{ required: true, message: "请输入密码" }]}/>
          <Submit>登录</Submit>
        </Login>
      </div>
    );
  }
}

登录接口mock，创建 mock/login.js：

export default {
  "post /api/login"(req, res, next) {
    const { username, password } = req.body;
    console.log(username, password);
    if (username == "kaikeba" && password == "123") {
      return res.json({
        code: 0,
        data: {
          token: "kaikebaisgood",
          role: "admin",
          balance: 1000,
          username: "kaikeba"
        }
      });
    }
    if (username == "jerry" && password == "123") {
      return res.json({
        code: 0,
        data: {
          token: "kaikebaisgood",
          role: "user",
          balance: 100,
          username: "jerry"
        }
      });
    }
    return res.status(401).json({
      code: -1,
      msg: "密码错误"
    });
  }
};

用户信息保存和登录动作编写，创建src/models/user.js：

import axios from "axios";
import router from "umi/router";

const userinfo = JSON.parse(localStorage.getItem("userinfo")) || {
  token: "",
  role: "",
  username: "",
  balance: 0
};

// api
function login(payload) {
  return axios.post("/api/login", payload);
}

export default {
  namespace: "user", // 可省略
  state: userinfo, // 初始状态：缓存或空对象
  effects: {
    // action: user/login
    *login({ payload }, { call, put }) {
      try {
        const {
          data: { code, data: userinfo }
        } = yield call(login, payload);
        if (code == 0) {
          // 登录成功: 缓存用户信息
          localStorage.setItem("userinfo", JSON.stringify(userinfo));
          yield put({ type: "init", payload: userinfo });
          router.push("/");
        } else {
          // 登录失败：弹出提示信息，可以通过响应拦截器实现
        }
      } catch (error) {}
    }
    // *logout({ payload }, { call, put }) {
    //   localStorage.removeItem("userinfo");
    //   yield put({ type: "clear" });
    //   router.push("/login");
    // }
  },
  reducers: {
    init(state, action) {
      // 覆盖旧状态
      return action.payload;
    }
    // clear(state, action) {
    //   return initUserinfo;
    // }
  }
};

登录失败处理
设置响应状态吗，mock/login.js

return res.status(401).json({
  code: -1,
  msg: "密码错误"
});

响应拦截，创建 src/interceptor.js

import axios from "axios";
import { notification } from "antd";

const codeMessage = {
  202: "一个请求已经进入后台排队（异步任务）。",
  401: "用户没有权限（令牌、用户名、密码错误）。",
  404: "发出的请求针对的是不存在的记录，服务器没有进行操作。",
  500: "服务器发生错误，请检查服务器。"
};

// 仅拦截异常状态响应
axios.interceptors.response.use(null, ({ response }) => {
  if (codeMessage[response.status]) {
    notification.error({
      message: `请求错误 ${response.status}: ${response.config.url}`,
      description: codeMessage[response.status]
    });
  }
  return Promise.reject(err);
});

拦截器生效，创建 src/global.js：

import interceptor from './interceptor'

商品列表

数据mock，mock/goods.js：

// 课程列表
const course={
  data:{
    'Javascript':[
      {id:1,name:'ES6语法实战',img:'LearnES6_Final.png',price:'100',solded:'561',},
      {id:2,name:'Typescript实战',img:'Typescript_Plumbing_image.png',price:'100',solded:'156',},
      {id:3,name:'Javascript算法实战',img:'JSBasic-Algorithms_Final.png',price:'100',solded:'526',},
    ],
    'React':[
      {id:4,name:'React入门',img:'ReactBeginners.png',price:'100',solded:'536',},
      {id:5,name:'ReactNative开发自己的APP',img:'ReactNative.png',price:'100',solded:'456',},
      {id:6,name:'React服务端渲染实战',img:'ReactNextServer_Final.png',price:'100',solded:'556',},
      {id:7,name:'Redux Sage中间件实战',img:'ReduxSaga.png',price:'100',solded:'2256',},
      {id:8,name:'试用react开发PWA应用',img:'PWAReact_Final.png',price:'100',solded:'1156',},
      {id:9,name:'React Hooks实战',img:'SimplifyHooks_Final.png',price:'100',solded:'5361',},
      {id:10,name:'React Mobx状态管理实战',img:'React_Mobx_TS.png',price:'100',solded:'956',},
    ],
    'Vuejs':[
      {id:11,name:'Vue进阶实战',img:'VueJS_Final.png',price:'180',solded:'586',},
      {id:12,name:'Vuejs开发pwa应用',img:'VuePwa.png',price:'100',solded:'596',},
      {id:13,name:'试用TS开发Vuejs应用',img:'TSVue_Final.png',price:'100',solded:'526',},
    ],
    'Git':[
      {id:14,name:'Github从入门到精通',img:'github.png',price:'99',solded:'10',},
      {id:15,name:'Git版本控制实战',img:'LearnGit.png',price:'49',solded:'180',},],
    'Test':[
      {id:16,name:'Puppetee测试入门',img:'TestGooglePuppeteer_Final.png',price:'10',solded:'56',},
      {id:17,name:'使用jest测试你的React项目',img:'TestReactJest.png',price:'30',solded:'10',},
    ],
    'Python':[
      {id:18,name:'Python从入门到精通',img:'IntroPython.png',price:'100',solded:'56',},
    ],
    'Node.js':[
      {id:19,name:'使用Docker部署你的nodejs',img:'NodeDocker_1000.png',price:'100',solded:'56',},
      {id:20,name:'在AWS环境部署nodejs',img:'NodeAWSServerless_Final.png',price:'100',solded:'56',},
    ],
    'GraphQL':[
      {id:21,name:'GraphQL从入门到精通',img:'GraphQL_Final.png',price:'100',solded:'56',},
    ]
  },
  tags:['Javascript','React','Vuejs','Git','Test','Python','Node.js','GraphQL']
}
// 课程分类
course.tags.forEach(tag=>{
  course.data[tag].forEach(v=>{
    v.tag = tag
  })
})

export default {
  // "method url": Object 或 Array
  // "get /api/goods": {
  //   result: data
  // },
  // "method url": (req, res) => {}
  "get /api/goods": function(req, res, next) {
    setTimeout(() => {
      res.json({
        code: 0,
        data: course
      });
    }, 2500);
  }
};

图片素材，public/courses/*.png
修改商品数据模型 src/pages/goods/models/goods.js（局部模型）：

import axios from "axios";

// api
function getGoods() {
  return axios.get("/api/goods");
}

export default {
  namespace: "goods",
  state: {
    courses: {}, // 课程
    tags: [] // 分类
  },
  effects: {
    *getList(action, { call, put }) {
      const { data: {data: courseData} } = yield call(getGoods);
      yield put({ type: "initGoods", payload: courseData });
    }
  },
  reducers: {
    initGoods(state, { payload }) {
      const { tags, data: courses } = payload;
      return { ...state, tags, courses };
    },
    addGood(state, action) {
      console.log(action);
      return [...state, { title: action.payload.title }];
    }
  }
};

商品展示组件，创建src/pages/goods/index.js：

import React, { Component } from "react";
import { Card, Row, Col, Icon, Skeleton } from "antd";
import { TagSelect } from "ant-design-pro";
import { connect } from "dva";

@connect(
  state => ({
    courses: state.goods.courses,
    tags: state.goods.tags,
    // loading: state.loading
  }),
  {
    addCart: item => ({type: "cart/addCart",payload: item}),
    getList: () => ({type: "goods/getList"})
  }
)
class Goods extends Component {
  constructor(props) {
    super(props);
    // displayCourses为需要显示的商品数组
    this.state = {
      tags: [], // 默认未选中
      displayCourses: new Array(8).fill({}) // 设置size可用于骨架屏展示
    };
  }
  componentDidMount() {
    this.props.getList();
  }
  componentWillReceiveProps(props) {
    // 数据传入时执行一次tagSelectChange
    if (props.tags.length) {
      this.tagSelectChange(props.tags, props.courses);
    }
  }
  tagSelectChange = (tags, courses = this.props.courses) => {
    // 过滤出显示数据
    let displayCourses = [];
    tags.forEach(tag => {
      displayCourses = [...displayCourses, ...courses[tag]];
    });
    this.setState({ displayCourses, tags });
  };

  addCart = (e, item) => {
    e.stopPropagation();
    this.props.addCart(item);
  };

  render() {
    // if (this.props.loading.models.goods) {
    //   return <div>加载中...</div>;
    // }
    return (
      <div>
        {/* 分类标签 */}
        ...
        {/* 商品列表 */}
        ...
      </div>
    );
  }
}
export default Goods;

分类标签：

<TagSelect onChange={this.tagSelectChange} value={this.state.tags}>
  {this.props.tags.map(tag => {
    return (
      <TagSelect.Option key={tag} value={tag}>{tag}</TagSelect.Option>
    );
  })}
</TagSelect>

商品列表：

<Row type="flex" justify="start">
  {this.state.displayCourses.map((item, index) => {
    return (
      // span=6表示4列
      <Col key={index} style={{ padding: 8 }} span={6}>
        {item.name 
        ? (<Card extra={<Icon onClick={e => this.addCart(e, item)} type="shopping-cart" style={{ fontSize: 18 }}/>}
            onClick={() => this.toDetail(item)} hoverable  title={item.name} cover={<img src={"/course/" + item.img} />} >
            <Card.Meta description={
                <div>
                  <span>￥{item.price}</span>
                  <span style={{ float: "right" }}>
                    <Icon type="user" /> {item.solded}
                  </span>
                </div>
              } />
            <div />
          </Card>) 
        : (<Skeleton active={true} />)}
      </Col>
    );
  })}
</Row>

加购物车

创建 models/cart.js：

export default {
  namespace: "cart", // 可省略
  state: JSON.parse(localStorage.getItem("cart")) || [], // 初始状态：缓存或空数组
  reducers: {
    addCart(cart, action) {
      const good = action.payload;
      const idx = cart.findIndex(v => v.id == good.id);
      if (idx > -1) {
        // 更新数量
        const cartCopy = [...cart];
        const itemCopy = { ...cartCopy[idx] };
        itemCopy.count += 1;
        cartCopy.splice(idx, 1, itemCopy);
        return cartCopy;
      } else {
        // 新增
        return [...cart, { ...good, count: 1 }];
      }
    }
  }
};

购物车数据同步的到localStorage，创建 src/app.js，配置 dva：

export const dva = {
  config: {
    onStateChange(state,a) {
      if (localStorage) {
        localStorage.setItem("cart", JSON.stringify(state.cart));
      }
    }
  }
};

表头添加购物车信息，src/layouts/index.js：

...
export default class extends Component {
  ...
  render() {
    ....
    return (
      // 上中下布局
      <Layout>
        {/* 页头 */}
        <Header className={styles.header}>
          ...
          {/* 购物车信息 */}
          <Dropdown overlay={menu} placement="bottomRight">
            <div className={styles.cart}>
              <Icon type="shopping-cart" style={{ fontSize: 18 }} />
              <span>我的购物车</span>
              <Badge count={this.props.count} offset={[-4, -18]} />
            </div>
          </Dropdown>
        </Header>
        {/* 内容 */}
        ...
        {/* 页脚 */}
        ...
      </Layout>
    );
  }
}

展示购物车数据

@connect(state => ({
  count: state.cart.length,
  cart: state.cart
}))
export default class extends Component {
	const menu = (
	  <Menu>
	    {this.props.cart.map((item, index) => (
	      <Menu.Item key={index}>
	        {item.name}×{item.count} <span>￥{item.count * item.price}</span>
	      </Menu.Item>
	    ))}
	  </Menu>
	);
	render(){
		return (
			...
			{/* 购物车信息 */}
	          <Dropdown overlay={menu} placement="bottomRight">
	            ...
	          </Dropdown>
			...
		);
	}
}

界面

在这里插入图片描述

React原理

React核心API

React源码：https://github.com/facebook/react/blob/master/packages/react/src/React.js

const React = {
  Children: {
    map,
    forEach,
    count,
    toArray,
    only,
  },

  createRef,
  Component,
  PureComponent,

  createContext,
  forwardRef,
  lazy,
  memo,

  error,
  warn,

  useCallback,
  useContext,
  useEffect,
  useImperativeHandle,
  useDebugValue,
  useLayoutEffect,
  useMemo,
  useReducer,
  useRef,
  useState,

  Fragment: REACT_FRAGMENT_TYPE,
  Profiler: REACT_PROFILER_TYPE,
  StrictMode: REACT_STRICT_MODE_TYPE,
  Suspense: REACT_SUSPENSE_TYPE,

  createElement: __DEV__ ? createElementWithValidation : createElement,
  cloneElement: __DEV__ ? cloneElementWithValidation : cloneElement,
  createFactory: __DEV__ ? createFactoryWithValidation : createFactory,
  isValidElement: isValidElement,

  version: ReactVersion,

  unstable_ConcurrentMode: REACT_CONCURRENT_MODE_TYPE,

  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: ReactSharedInternals,
};

// Note: some APIs are added with feature flags.
// Make sure that stable builds for open source
// don't modify the React object to avoid deopts.
// Also let's not expose their names in stable builds.

if (enableStableConcurrentModeAPIs) {
  React.ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
  React.unstable_ConcurrentMode = undefined;
}

export default React;

React-dom：https://github.com/facebook/react/blob/master/packages/react-dom/src/client/ReactDOM.js
核心精简API：

let React = {
	createElement,
	Component,
	PureComponent
}

JSX

为什么需要js？

JSX是对 js 语法的扩展，使我们可以用类似 xml 方式描述视图。

为什么需要JSX？

执行快、类型安全、简单快速-提高开发效率

原理： babel-loader 会预编译 JSX 为 React.createElement(type, props, …children)
使用：

import React from 'react'
import ReactDOM from 'react-dom'

function Comp(props){
  return <h2>hi, {props.name}</h2>
}
const jsx = (
  <div id="demo">
    <span>hi</span>
    <Comp name="kaikeba"></Comp>
  </div>
)
console.log(JSON.stringify(jsx, null, 2))
ReactDOM.render(jsx, document.querySelector('#root'))

打印出 jsx 查看：

{
  "type": "div",
  "key": null,
  "ref": null,
  "props": {
    "id": "demo",
    "children": [
      {
        "type": "span",
        "key": null,
        "ref": null,
        "props": {
          "children": "hi"
        },
        "_owner": null,
        "_store": {}
      },
      {
        "key": null,
        "ref": null,
        "props": {
          "name": "kaikeba"
        },
        "_owner": null,
        "_store": {}
      }
    ]
  },
  "_owner": null,
  "_store": {}
}

自定义实现React

src/index.js：

// import React from 'react'
import React, {Component} from './kreact'
// import ReactDOM from 'react-dom'
import ReactDOM from './kreact-dom'

// 函数组件
function CompFunc(props){
  return <h2>function组件 hi, {props.name}</h2>
}
// class组件
class CompClass extends Component {
  render() {
    return <h2>class组件</h2>
  }
}
const users = [
  {id: 1, name: 'jerry'},
  {id: 2, name: 'tom'}
];
const jsx = (
  <div id="demo" style="color: red" className="box">
    <span>hi</span>
    <CompFunc name="kaikeba"></CompFunc>
    <CompClass></CompClass>
    <ul>
      {users.map(u => (<li key={u.id}>{u.name}</li>))}
    </ul>
  </div>
)
console.log(jsx)
// ReactDOM.render(<h2>React 原理</h2>, document.querySelector('#root'))
ReactDOM.render(jsx, document.querySelector('#root'))

kreact.js

kreact 主要用于核心 API 声明
createElement 方法实现：

import {createVNode} from './kvdom'

function createElement(type, props, ...children){
  // console.log(arguments)
  // 传递的类型有三种：1-原生标签，2-函数式组件，3-class组件
  // 使用 vtype 属性表示元素类型
  props.children = children
  console.log({type, props})
  delete props.__source
  delete props.__self

  // 判断组件类型
  let vtype;
  if(typeof type === 'string'){
    // 原生标签，div、span、...
    vtype = 1;
  }else if(typeof type === 'function'){
    if(type.isClassComponent){
      // 类组件
      vtype = 2;
    } else{
      // 函数组件
      vtype = 3;
    }
  }

  return createVNode(vtype, type, props)
}
// 实现Component
export class Component {
  // 区分function和class组件
  static isClassComponent = true;
  constructor(props){
    this.props = props;
    this.state = {};
  }
  setState(state){
    // ...
  }
}
export default {
  createElement
}

kreact-dom.js

kreact-dom执行渲染逻辑
render 方法实现：

import { initVNode } from "./kvdom";

function render(vnode, container) {
  // container.innerHTML = `<pre>${JSON.stringify(vnode, null, 2)}</pre>`
  container.appendChild(initVNode(vnode))
}
export default {
  render
}

kvdom.js

kvdom创建dom、转换vdom、执行diff等

// 转换 vdom 为 dom
export function initVNode(vnode){
  // vnode是一颗虚拟DOM树
  const {vtype} = vnode
  if(!vtype){
    // 文本节点，TextNode
    return document.createTextNode(vnode);
  }
  if(vtype === 1){
    // 原生节点
    return createElement(vnode);
  }else if(vtype === 2) {
    // class 组件
    return createClassComp(vnode);
  }else{
    return createFunctionComp(vnode);
  }
}
function createElement(vnode){
  const {type, props} = vnode;
  const node = document.createElement(type);
  // 属性处理
  const {key, children, ...rest} = props;
  Object.keys(rest).forEach(attr => {
    // 特殊处理的属性：htmlFor，className
    if(attr === 'className'){
      node.setAttribute('class', rest[attr])
    }else{
      node.setAttribute(attr, rest[attr])
    }
  });
  // 递归处理可能存在的子元素
  children.forEach(c => {
    // c 如果是数组
    if(Array.isArray(c)){
      c.forEach(n => {
        node.appendChild(initVNode(n))
      });
    }else{
      node.appendChild(initVNode(c))
    }
  });
  return node;
}
function createClassComp(vnode){
  const {type, props} = vnode;
  console.log(type)
  const component = new type(props);
  // 执行 class 组件的render方法得到vdom
  const vdom = component.render();
  return initVNode(vdom)
}
function createFunctionComp(vnode){
  const {type, props} = vnode;
  // type 是函数组件，它执行直接返回vdom
  const vdom = type(props);
  return initVNode(vdom)
}

// vdom diff
// ...

export function createVNode(vtype, type, props){
  // 传递的类型有三种：1-原生标签，2-函数式组件，3-class组件
  // 使用 vtype 属性表示元素类型
  const vnode = {
    vtype, type, props
  }
  return vnode
}

总结

webpack + babel-loader编译时，替换JSX为React.createElement(…)
所有的React.createElement(…)执行结束后会得到一个JS对象树，他能完整描述 DOM 结构，称之为虚拟DOM
ReactDOM.render(vdom, container)可以将vdom转换为dom，追加至container。通过遍历vdom树，根据vtype不同，执行不同的逻辑：vtype=1生成原生标签，vtype=2实例化class组件并将其render返回的vdom初始化，vtype=3直接执行函数将结果初始化

PureComponent

继承Component，主要是设置了shouldComponentUpdate生命周期

import shallowEqual from './shallowEqual'
import Component from './Component'

export default function PureComponent(props, context){
	Component.call(this, props, context)
}
PureComponent.prototype = Object.create(Component.prototype)
PureComponent.prototype.constructor = PureComponent
PureComponent.prototype.isPureReactComponent = true
PureComponent.prototype.shouldComponentUpdate = shallowCompare
function shallowCompare(nextProps, nextState){
	return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState)
}

setState

class 的特点，就是可以 setState，使用如下：

class App extends React.Component {
	constructor(props){
		super(props)
		this.state = {num: 1}
	}
	componentDidMount(){
		setInterval(() => {
			this.setState({num: this.state.num + 1})
		}, 1000)
	}
	render(){
		return <div>
			<h2>你好，{this.props.name}</h2>{this.state.num}
		<div>
	}
}

setState并没有直接操作去渲染，而是执行了一个异步的 updater 队列，使用一个类来专门管理

export let updateQueue = {
  updaters: [],
  isPending: false,
  add(updater) {
    _.addItem(this.updaters, updater)
  },
  batchUpdate(){
    if(this.isPending){
      return
    }
    this.isPending = true
    let { updaters } = this
    let updater
    while (updater = updaters.pop()) {
      updater.updateComponent()
    }
    this.isPending = false
  }
}
function Updater(instance){
  this.instance = instance
  this.pendingStates = []
  this.pendingCallbacks = []
  this.isPending = false
  this.nextProps = this.nextContext = null
  this.clearCallbacks = this.clearCallbacks.bind(this)
}
Updater.prototype = {
  emitUpdate(nextProps, nextContext) {
    this.nextProps = nextProps
    this.nextContext = nextContext
    nextProps || !updateQueue.isPending
      ? this.updateComponent()
      : updateQueue.add(this)
  },
  updateComponent() {
    let {instance, pendingStates, nextProps, nextContext} = this
    if(nextProps || pendingStates.length>0){
      nextProps = nextProps || instance.props
      nextContext = nextContext || instance.context
      this.nextProps = this.nextContext = null
      shouldUpdate(instance, nextProps, this.getState(), nextContext, this.clearCallbacks)
    }
  },
  addState(nextState){
    if(nextState){
      _.addItem(this.pendingStates, nextState)
      if(!this.isPending){
        this.emitUpdate()
      }
    }
  },
  replaceState(nextState){
    let {pendingStates} = this
    pendingStates.pop()
    _.addItem(pendingStates, [nextState])
  },
  getState(){
    let {instance, pendingStates} = this
    let {state, props} = instance
    if(pendingStates.length){
      state = _.extend({}, state)
      pendingStates.forEach(nextState => {
        let isReplace = _.isArr(nextState)
        if(isReplace){
          nextState = nextState[0]
        }
        if(_.isFn(nextState)){
          nextState = nextState.call(instance, state, props)
        }
        if(isReplace){
          state = _.extend({}, nextState)
        }else{
          _.extend(state, nextState)
        }
      })
      pendingStates.length = 0
    }
    return state
  },
  clearCallbacks(){
    let {pendingCallbacks, instance} = this
    if(pendingCallbacks.length >0){
      this.pendingCallbacks = []
      pendingCallbacks.forEach(callback => callback.call(instance))
    }
  },
  addCallback(callback){
    if(_.isFn(callback)){
      _.addItem(this.pendingCallbacks, callback)
    }
  }
}

diff算法

在这里插入图片描述

diff策略

Web UI 中 DOM 节点跨层级的移动操作特别少，可以忽略不计
拥有相同类的两个组件将会生成相似的树形结构，拥有不同类的两个组件将会生成不同的树形结构
对于同一层级的一组子节点，它们可以通过唯一 id 进行区分
基于以上三个前提策略，React分别对 tree diff、component diff 以及 element diff 进行了算法优化，事实也证明这三个前提策略是合理且准确的，它保证了整体界面构建的性能

element diff

当节点处于同一层级时，React diff 提供了三种节点操作，分别为：INSERT_MARKUP（插入）、MOVE_EXISTING（移动）、和REMOVE_NODE（删除）。

INSERT_MARKUP：新的 component 类型不在老集合里，即是全新的节点，需要对新节点执行插入操作
MOVE_EXISTING：在老集合里有新 component 类型，且 element 是可更新的类型，generateComponentChildren已调用receiveComponent，这种情况下prevChild=nextChild，就需要做移动操作，可以复用以前的 DOM 节点
REMOVE_NODE：老 component 类型在新集合里有，但对应的 element 不同则不能直接复用和更新，需要执行删除操作，或者老 component 不在新集合里的，也需要执行删除操作

讲文明的喜羊羊拒绝pua

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web全栈架构师（二）——React学习笔记（3）

React学习笔记项目实战资源页面布局用户登录认证商品列表加购物车界面React原理React核心APIJSX自定义实现Reactkreact.jsrenderComponent总结：PureComponentsetState虚拟DOMdiff算法diff策略element diffReactDom.renderreduxreact-reduxHooksFibter项目实战资源Ant De...
复制链接

扫一扫