实现一个简单的react框架 -- (无Fiber架构)

最新推荐文章于 2024-08-12 19:01:02 发布
最新推荐文章于 2024-08-12 19:01:02 发布
阅读量213 收藏
点赞数
分类专栏： react 文章标签： reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yy729851376/article/details/117461923
版权

简介

本文教你如何实现一个类 react 15 的框架，在实现的过程中了解 react 的生命周期函数，异步setState 这些是如何实现的。

JSX

JSX 是一种 JavaScript 的语法扩展，运用于React架构中。在 react 中 jsx 会被转换为虚拟DOM。
什么是虚拟DOM呢。简单理解就是一个格式固定了的对象。

const title = <div className="name">111</div>;

比如这段代码在 react 编译的时候，会转换为一个方法，这个方法的返回值就是虚拟DOM。

const title = React.createElement("div", attrs:{className:"name"}, "111");

// 虚拟dom
const DOM = {
    tag:'div',
    attrs:{
        className:"name"
    },
    children:["111"]
}

搭建项目

-- 目录 --
│  dist                          #打包后的文件
│  node_modules                  #npm下载的包文件
│  src                           #开发代码
│  babel.config.json             #babel 插件功能配置
│  package.json                  #初始化项目文件
│  webpack.dev.config.js         #webpack开发配置文件

我们需要在编译时把 jsx 自动转为虚拟DOM，要使用@babel/plugin-transform-react-jsx这个插件。
使用时，只需要在 babel 配置中把它放出来。

// babel.config.json
{
  "presets": ["@babel/preset-env"],
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx",
      {
      	// 配置 遇到 jsx 类型的数据 自动转换为 React.createElement
        "pragma": "React.createElement"
      }
    ]
  ]
}

// package.json 初始化项目 
{
  "name": "react-simulation-15",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --config webpack.dev.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/plugin-transform-react-jsx": "^7.12.12",
    "babel-loader": "^8.2.2",
    "webpack": "^5.11.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {}
}

// webpack.dev.config.js 启动配置
const path = require("path");

module.exports = {
  // 模式 开始模式 会自动预设安装插件 模式不同安装插件不同
  // 可以使用 node 自带的 process.env.NODE_ENV 来获取所在的环境
  mode: 'development',// production 生产模式  development 开发模式

  /* 入口 打包开始的文件*/
  entry:  path.join(__dirname, "src/index.js"),

  /* 输出到dist目录，输出文件名字为dist.js */
  output: {
    path: path.join(__dirname, "dist"),
    filename: 'dist.js',
  },

  /* cacheDirectory是用来缓存编译结果，下次编译加速 */
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: ["babel-loader?cacheDirectory=true"],
        include: path.join(__dirname, "src"),
      },
    ]
  },

  // webpack-dev-server
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true, // gzip压缩
    host: "0.0.0.0", // 允许ip访问
    hot: true, // 热更新
    historyApiFallback: true, // 解决启动后刷新404
    port: 8111, // 端口
  },
};

根据插件的要求我们需要自定义一个 React.createElement ，在 src/index.js 中编写代码。

  • 编译时插件会直接调用该方法并传入多个参数，可以理解为使用了回调函数。
const React = {};
// tag DOM节点的标签名 
// attrs 节点上的所有属性
// children 子节点
React.createElement = function(tag, attrs, ...children) {
  return {
    tag,
    attrs,
    children
  };
};
console.log(<div>111</div>)

然后在dist文件夹下添加index.html。启动项目，console.log 打印成功，表示我们项目初始化成功。

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title></head>
<body><div id="root"></div><script src="dist.js"></script></body>
</html>

ReactDOM.render

ReactDOM.render 是 react 的入口方法。接下来就是实现这个入口函数。

ReactDOM.render(
    <div>111</div>,
    document.getElementById('root')
);

从这段代码可以看出，第一个参数是一个jsx( 虚拟DOM )，第二个参数是一个真实DOM。我们通过虚拟DOM渲染成的真实DOM都将放入第二个参数中（简称容器）。

那么 render 这个方法，第一步要做的就是把虚拟DOM转换为真实DOM节点然后放入容器中。

const ReactDOM = {};
/**
 *
 * @param {*} vDom 虚拟DOM
 * @param {*} container 容器
 */
ReactDOM.render = function (vDom, container) {
  container.innerHTML = ""; // 清空容器
  // 放入容器中
  return container.appendChild(initComponent(vDom));
};

/**
 * 创建真实节点
 * @param {*} vDom 虚拟DOM
 * @param {*} container 容器
 */
function initComponent(vDom) {
  // 错误节点 修改为空
  if (vDom === null || vDom === undefined || typeof vDom === "boolean") vDom = "";
  // 文本返回文本节点
  if (typeof vDom === "number" || typeof vDom === "string") {
    vDom = String(vDom);
    let textNode = document.createTextNode(vDom);
    return textNode;
  }

  // 虚拟DOM 生成真实节点
  const dom = document.createElement(vDom.tag);
  // 添加属性
  setAttr(dom, vDom.attrs);
  if (vDom.children) {
    // 有子节点 重复操作
    vDom.children.forEach((child) => dom.appendChild(initComponent(child)));
  }
  return dom;
}

当然只是创建真实DOM节点是不够的，还要在节点上为它添加上属性。

/**
 * 修改属性
 * @param {*} dom 真实节点
 * @param {*} attrs 属性 数组对象
 */
function setAttr(dom, attrs) {
  Object.keys(attrs || []).forEach((key) => {
    const value = attrs[key];
    if (key === "style") {
      // 样式
      if (value && typeof value === "object") {
        for (let name in value) {
          dom.style[name] = value[name];
        }
      } else {
        dom.removeAttribute(key);
      }
    } else if (/on\w+/.test(key)) {
      // 事件处理 直接赋值
      key = key.toLowerCase();
      dom[key] = value || "";
      if (!value) {
        dom.removeAttribute(key);
      }
    } else {
      // 当值为空 删除属性
      if (value) {
        dom.setAttribute(key, value);
      } else {
        dom.removeAttribute(key);
      }
    }
  });
}

// ----------------- 使用 -----------------
ReactDOM.render(
    <div name="111">111</div>,
    document.getElementById('root')
);

启动项目页面展示 111 ，到这我们实现了浏览器基础节点展示，下面开始加入组件的转换。

加入组件和实现生命周期函数

用 JSX 编写组件后，@babel/plugin-transform-react-jsx 会帮我们把第一个参数tag变成function这个字符串，用于我们区分是否是组件。
有状态的组件都有一个基类 React.Component ，主要用用初始化 state & props的数据 和 setState的功能（执行后更新组件）。这里只是实现一个简单的功能后续会修改。

// 基类
React.Component = class Component {
  constructor(props = {}) {
    this.state = {};
    this.props = props;
  }
  setState(stateChange) {
    // 保存上一次的状态
    this.oldState = JSON.parse(JSON.stringify(this.state));
    // 合并 state
    Object.assign(this.state, stateChange);
    // 更新组件状态
    renderComponent(this);
  }

  render() {
    throw "组件无渲染！！！";
  }
}

在 react 中组件分为两种：继承了基类的 和 未继承的无状态组件。
添加 createComponent 公用方法。用于处理传入组件，实例化一个新组件出来。

/**
 * 创建组件
 * @param {*} component 函数组件
 * @param {*} props 属性值
 */
function createComponent(component, props) {
  let comp;
  // 根据原型判断 是否是 继承基类的组件
  if (component.prototype && component.prototype.render) {
    // 返回实例化组件
    comp = new component(props);
  } else {
    comp = new React.Component(props);
    // 修改构造函数 取消默认的 state --取消组件的状态
    comp.constructor = component;
    // 当执行 render 默认执行函数 并获取 return 中的 jsx
    comp.render = function () {
      return this.constructor(props);
    };
  }

  return comp;
}

组件的渲染过程中是有声明周期函数的，当 props 修改后我们需要实现这个生命周期。
添加 setComponentProps 用于修改组件的 props。

/**
 * 修改组件属性值
 * @param {*} component 函数组件
 * @param {*} props 属性值
 */
function setComponentProps(component, props) {
  // 是否保存 真实DOM 后面生成节点时 创建
  if (!component.DOM) {
    // 声明周期函数 初始化  第一次加载组件执行
    if (component.willMount) component.willMount();
  } else if (component.base && component.receiveProps) {
    // 后续修改 props 执行
    component.receiveProps(props);
  }

  // 修改保存 props
  component.props = props;

  // 生成对应真实DOM
  renderComponent(component);
}

除了修改 props 的生命周期函数，在生成真实DOM前后也有其他生命周期函数。
添加 renderComponent 创建组件真实DOM 替换 旧DOM，并调用不同阶段的声明周期函数。

/**
 * 生成对应真实DOM 并替换 旧DOM
 * @param {*} component 函数组件
 */
function renderComponent(component) {
  let DOM;

  // 获取 组件的虚拟DOM
  const vDom = component.render();

  // 生命周期函数 修改 真实节点创建前的 什么周期函数
  if (component.DOM && component.willUpdate) component.willUpdate();

  // 判断组件 是否继续进行 更新操作的函数
  if (component.DOM && component.shouldUpdate) {
    // 如果组件经过了初次渲染，是更新阶段，那么可以根据这个生命周期判断是否更新
    let result = true;
    // 根据 组件返回状态判断 是否终止
    result =
      component.shouldUpdate &&
      component.shouldUpdate(component.props, component.state);
    if (!result) {
      // 终止更新 不修改对应的 state
      component.state = JSON.parse(JSON.stringify(component.oldState));
      component.prevState = JSON.parse(JSON.stringify(component.oldState));
      return;
    }
  }

  // 得到真实DOM
  DOM = initComponent(vDom);
  // DOM = diffNode(component.DOM, vDom);

  if (component.DOM) {
    // 真实DOM 生成后 执行
    if (component.didUpdate) component.didUpdate();
  } else if (component.didMount) {
    // 第一次 DOM加载完后执行
    component.didMount();
  }

  // 当存在真实DOM节点 新真实DOM 替换 旧的DOM
  if (component.DOM && component.DOM.parentNode) {
    component.DOM.parentNode.replaceChild(DOM, component.DOM);
  }
  // 绑定真实DOM
  component.DOM = DOM;
  // DOM绑定 本次组件
  DOM._component = component;
}

最后修改 initComponent 添加组件函数的对比渲染。

/**
 * 创建真实节点
 * @param {*} vDom 虚拟DOM
 * @param {*} container 容器
 */
function initComponent(vDom) {
  // 错误节点 修改为空
  if (vDom === null || vDom === undefined || typeof vDom === "boolean")
    vDom = "";
  // 文本返回文本节点
  if (typeof vDom === "number" || typeof vDom === "string") {
    vDom = String(vDom);
    let textNode = document.createTextNode(vDom);
    return textNode;
  }
  // 组件DOM
  if (typeof vDom === "object" && typeof vDom.tag === "function") {
    //先创建组件
    const component = createComponent(vDom.tag, vDom.attrs);
    // 设置属性
    setComponentProps(component, vDom.attrs);
    //返回的是真实dom对象
    return component.DOM;
  }

  // 默认节点
  if (typeof vDom === "object" && typeof vDom.tag === "string") {
    // 虚拟DOM 生成真实节点
    const dom = document.createElement(vDom.tag);
    // 添加属性
    setAttr(dom, vDom.attrs);
    if (vDom.children) {
      // 有子节点 重复操作
      vDom.children.forEach((child) => dom.appendChild(initComponent(child)));
    }
    return dom;
  }
}

修改使用框架的代码，启动项目就可以测试了。

// ----------------- 使用 -----------------
class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      num: 0,
    };
  }
  // shouldUpdate(po, st) {
  //   console.log("st", st, po);
  //   if (st.num > 3) {
  //     return false;
  //   }
  //   return true;
  // }
  willMount() {
    console.log("初始化");
  }
  but() {
    this.setState( {num:this.state.num + 1})
  }
  render() {
    return (
      <h1>
        <button type="button" onclick={this.but.bind(this)}>+</button>
        {this.state.num}, {this.props.name}
      </h1>
    );
  }
}
function App() {
  return (
    <div>
        <Home key={1} name={`你好`} />
        <Home key={2} name={"你好"} />
    </div>
  );
}
ReactDOM.render(<App />, document.getElementById("root"));

到这我们实现了展示组件，组件的生命周期函数，setState功能。

实现diff算法

接下来就是实现react中的diff算法,当然这里的算法非常简单。复杂的算法 diff 算法原理概述。
这里实现得比较简单，简单介绍下diff算法中的几种对比:

  • 纯文本或者数字的对比
  • 组件对比
  • 浏览器节点对比
  • 子节点的对比，等
/**
 * 节点对比
 * @param {*} dom 真实DOM
 * @param {*} vDom 虚拟DOM
 */
function diffNode(dom, vDom) {
  let newDom = dom;
  // 错误节点 修改为空
  if (vDom === null || vDom === undefined || typeof vDom === "boolean")vDom = "";
  // 文本对比 
  if (typeof vDom === "number" || typeof vDom === "string") {
    vDom = String(vDom);
    // 如果当前的DOM就是文本节点，则直接更新内容
    if (dom && dom.nodeType === 3) {
      if (dom.textContent !== vDom) {
        dom.textContent = vDom;
      }
    } else {
      // 创建节点
      newDom = document.createTextNode(vDom);
      // 判断当前 真实DOM 是否存在 如果是 就替换节点
      if (dom && dom.parentNode) {
        dom.parentNode.replaceChild(dom, newDom);
      }
    }
    return newDom;
  }

  // 组件对比
  if (typeof vDom === "object" && typeof vDom.tag === "function") {
    return diffComponent(newDom, vDom);
  }

  // 默认节点对比
  if (typeof vDom === "object" && typeof vDom.tag === "string") {
    // 判断 节点 类型 是否相同
    if (!dom || !isSameNodeType(dom, vDom)) {
      // 创建 新节点
      newDom = document.createElement(vDom.tag);
      if (dom) {
        if (vDom.children) {
          // 当 虚拟DOM有子节 时 将原来的子节点移到新节点下
          [...dom.childNodes].map(newDom.appendChild);
        }
        if (dom.parentNode) {
          // 移除掉原来的DOM对象
          dom.parentNode.replaceChild(newDom, dom);
        }
      }
      // 修改属性
      diffAttributes(newDom, vDom);
    }

    //
    if (
      (vDom.children && vDom.children.length > 0) ||
      (newDom.childNodes && newDom.childNodes.length > 0)
    ) {
      diffChildren(newDom, vDom.children);
    }

    return newDom;
  }
}

在节点对比过程中，会多次使用相同的功能和判断，抽取为公用函数。

/**
 * 删除组件 并调用离开生命周期
 * @param {*} component
 */
function unmountComponent(component) {
  if (component.willUnmount) component.willUnmount();
  removeNode(component.DOM);
}

/**
 *  删除 真实节点
 * @param {*} dom
 */
function removeNode(dom) {
  if (dom && dom.parentNode) {
    dom.parentNode.removeChild(dom);
  }
}

/**
 * 判断真实节点 和 虚拟DOM 类型是否相同
 * @param {*} dom
 * @param {*} VDOM
 */
function isSameNodeType(dom, VDOM) {
  if (typeof VDOM === "string" || typeof VDOM === "number") {
    return dom.nodeType === 3;
  }
  if (typeof VDOM.tag === "string") {
    return dom.nodeName.toLowerCase() === VDOM.tag.toLowerCase();
  }
  return dom && dom._component && dom._component.constructor === VDOM.tag;
}

组件对比，当组件类型相同修改属性，不同相同删除原来的组件，创建一个新的组件返回。

/**
 * 组件类型 处理
 * @param {*} dom 真实DOM
 * @param {*} vDom 虚拟DOM
 */
function diffComponent(dom, vDom) {
  // 之前的虚拟DOM
  let comp = dom && dom._component;

  if (comp && comp.constructor === vDom.tag) {
    // 之前的虚拟DOM 和 现在的是同一个
    // 修改 props 属性
    setComponentProps(comp, vDom.attrs);
    // 获取最新的 真实DOM
    dom = comp.DOM;
  } else {
    // 当两次虚拟DOM 不同 删除之前的组件
    if (comp) {
      unmountComponent(comp);
    }
    // 先创建新组件
    const component = createComponent(vDom.tag, vDom.attrs);
    // 设置属性 生成组件DOM
    setComponentProps(component, vDom.attrs);
    // 获取最新的 真实DOM
    dom = component.DOM;
  }
  return dom;
}

浏览器节点的属性修改。

/**
 * 修改节点 属性
 * @param {*} dom 真实DOM
 * @param {*} vDom 虚拟DOM
 */
function diffAttributes(dom, vDom) {
  const olds = {}; // 旧DOM的属性
  const attrs = vDom.attrs; // 虚拟DOM的属性
  for (let i = 0; i < dom.attributes.length; i++) {
    const attr = dom.attributes[i];
    olds[attr.name] = undefined;
  }
  // 如果原来的属性不在新的属性当中，则将其移除掉（属性值设为undefined）
  setAttr(dom, olds);
  // 更新新的属性值
  setAttr(dom, attrs);
}

子DOM节点的对比，这里写得很简单。

/**
 * 子组件对比
 * @param {*} dom
 * @param {*} vchildren
 */
function diffChildren(dom, vchildren) {
  // 获取原来的节点
  const domChildren = dom.childNodes;
  const keyed = {};
  // 将有key的节点获取
  if (domChildren.length > 0) {
    for (let i = 0; i < domChildren.length; i++) {
      const child = domChildren[i];
      const key = child._component?.props?.key;
      if (key) {
        keyed[key] = child;
      }
    }
  }

  // 子节点 对比
  if (vchildren && vchildren.length > 0) {

    for (let i = 0; i < vchildren.length; i++) {
      const vchild = vchildren[i];
      const key = vchild.attrs?.key;
      let child; // 旧的真实节点

      // 如果有key，找到对应key值的节点
      if (key) {
        if (keyed[key]) {
          child = keyed[key];
          keyed[key] = undefined;
        }
      }
      console.log(child,vchild,keyed)
      
      // 对比节点返回 新节点
      let newChild = diffNode(child, vchild);

      // 获取当前 虚拟DOM对应的真实节点
      const f = domChildren[i];

      if (newChild && newChild !== dom && newChild !== f) {
        if (!f) {
          // 如果更新前的对应位置为空，说明此节点是新增的
          dom.appendChild(newChild);
        } else if (newChild === f.nextSibling) {
          // 如果更新后的节点和更新前对应位置的下一个节点一样，说明当前位置的节点被移除了
          removeNode(f);
        } else {
          // 将更新后的节点移动到正确的位置
          // 在已有节点之前插入
          // 注意insertBefore的用法，第一个参数是要插入的节点，第二个参数是已存在的节点
          dom.insertBefore(newChild, f);
          if (!child) {
            removeNode(f);
          }
        }
      }
    }
  }
}

开始diff对比，要修改 ReactDOM.render 和 renderComponent

/**
 *
 * @param {*} vDom 虚拟DOM
 * @param {*} container 容器
 */
ReactDOM.render = function (vDom, container) {
  container.innerHTML = ""; // 清空容器
  // 放入容器中
  // return container.appendChild(initComponent(vDom));
  return container.appendChild(diffNode(null, vDom));
};


/**
 * 生成对应真实DOM 并替换 旧DOM
 * @param {*} component 函数组件
 */
function renderComponent(component) {
  ...
  // 得到真实DOM
  // DOM = initComponent(vDom);
  DOM = diffNode(component.DOM, vDom);
  ...
}

现在我们实现了diff算法，这里主要是使用key来判断之前的组件是否存在，存在就使用之前的DOM只修改属性。

异步state

在进入下面之前先了解浏览器的事件循环机制。简单来说就是 js 在执行过程中有两个队列（ 队列的特点是先进先出 ），一个宏任务队列，一个微任务队列。他们的执行顺序是，主任务执行过程中把对应的宏任务（setTimeout 等），微任务（Promise.then() 等）分别放入各自的队列中。主任务执行完后，在宏任务队列中执行一个宏任务，然后去执行所有的微任务。这里要注意的是，是所有的微任务都会执行。重复这个步骤直到没有任务。JavaScript 运行机制详解

之前我们实现的 setState 每次执行都会更新组件，如果一个操作中多次使用 setState 对性能影响较大。所以我们需要优化。先把一次操作中的所有 setState 都放入数组中，把要更新的组件也放入另个数组中（数组中，组件不添加重复的），然后把 setState 合并 和 更新组件的方法 flush() 放入微任务中，就能保证在主任务执行完后在执行这个微任务。

let setStateQueue = []; // state队列
let renderQueue = []; // 组件队列
/**
 * 合并本次的所有 state
 * @param {*} stateChange
 * @param {*} component
 */
function enqueueSetState(stateChange, component) {
  // 合并操作的微任务只需要执行一次
  if (setStateQueue.length === 0) {
    defer(flush);
  }

  // 合并 state 队列
  setStateQueue.push({ stateChange, component });
  // 只放入不存在的组件
  if (!renderQueue.some((item) => item === component)) {
    renderQueue.push(component);
  }
}

/**
 * 执行合并 state 和 更新组件
 * 并清空 state队列 和 组件队列
 */
function flush() {
  let item, component;

  while ((item = setStateQueue.shift())) {
    const { stateChange, component } = item;
    // 是否存在 上一个 state 不存在 添加 第一个
    if (!component.prevState) {
      component.prevState = Object.assign({}, component.state);
    }
    // 判断是否是方法
    if (typeof stateChange === "function") {
      // 合并 方法 返回的值 未最新 state
      Object.assign(
        component.state,
        stateChange(component.prevState, component.props)
      );
    } else {
      // 合并state
      Object.assign(component.state, stateChange);
    }

    // 更新 下一次 prevState 为最新
    component.prevState = component.state;
  }

  while ((component = renderQueue.shift())) {
    // 更新组件
    renderComponent(component);
  }
}

// 事件执行机制 主任务全部执行完后 执行 微任务
function defer(fn) {
  return Promise.resolve().then(fn);
}

然后修改基类 React.Component 加入异步state

...
  setState(stateChange) {
    // 保存上一次的状态
    this.oldState = JSON.parse(JSON.stringify(this.state));
    // 合并 state
    // Object.assign(this.state, stateChange);
    // 更新组件状态
    // renderComponent(this);
    // 异步state
    enqueueSetState(stateChange, this);
  }
...

现在 异步state 加入成功了。修改执行一次操作中加入多次setState就可以测试了，只更新一次表示成功。

class Home extends React.Component {
  ...
  but() {
    for (let i = 0; i < 10; i++) {
      this.setState((pre) => {
        return { num: 1 + pre.num };
      });
    }
  }
  ...
}

这篇文章的代码：源码地址

参考文章

simple-react
JavaScript 运行机制详解：再谈Event Loop

nie-ny
关注
专栏目录
【React】如何理解 React 的 Fiber？
读心悦
06-18 846
理解 React 源码的 Fiber 需要对 React 的内部工作原理和性能优化有深入的了解。Fiber 是 React 16 及以后版本中引入的一种新的内部表示形式，用于在 React 的核心算法中更好地管理组件树的更新和渲染。
React框架新手入门
Mr_krab的博客
04-04 1万+
React框架简介 react是Facebook公司产品用于创建用户界面Javascript库 特点 1.组件思维 2.单向流数据 3. 虚拟Dom节点
实现一个简单的react框架 -- (Fiber架构)
小小的前端
06-02 504
简介 本文将从头开始编写一个简单的类 react 框架。用于理解 fiber 原理和 hooks 的实现，轻松地深入React代码库。 React.createElement 我们从编写createElement开始，这个函数主要用于把JSX转换成虚拟DOM（js对象）。这里我们使用@babel/plugin-transform-react-jsx这个插件自动转换。 // jsx const element = ( <div id="name"> <a>name</
从零搭建React全家桶框架教程：快速搭建react+react-router+redux项目
最新发布
qq_24428851的博客
08-12 925
本文中没有对react-router和redux做什么原理性和概念性的介绍，纯粹作为傻瓜式的教程，由react基本项目，到接入react-router，最后接入redux完成一个基本的react全家桶项目搭建，目的是让初学者能够体验一下完整的react全家桶基本项目。之前的教程是搭建一个常见jsx版react项目，最近在新项目中使用了ts语言，组件编写全面拥抱了hooks，redux使用reduxjs/toolkit，而不是thunk。接下来我们稍稍调整下项目的目录结构和页面内容，新增About页面。
react框架简单总结
lwl12345678_的博客
08-04 441
脚手架 安装脚手架：npm install -g create-react-app 修改镜像源：npm config set registry registry.npm.taobao.org 创建项目：npx create-react-app my-app 进入到目录：cd my-app 启动项⽬:npm start 暴露配置项:npm run eject 初识react 1.将src下的所有文件都删除, 2.将public文件下除列favicon.ico和index.html之外的文件都删除掉 修改i
最简单的react框架
个人新博客: https://cbbfcd.github.io/
06-15 519
定期打卡折腾了一阵子和小组的伙伴搭建了一个no redux的react框架欢迎指导，不要吝啬您的星星https://github.com/cbbfcd/wukong
自己实现一个react基本功能
MK.Gao Blog
04-10 783
1.react解决的问题组件化一个简单的点赞功能我们会从一个简单的点赞功能讲起。 假设现在我们需要实现一个点赞、取消点赞的功能。如果你对前端稍微有一点了解，你就顺手拈来：HTML: &lt;body&gt; &lt;div class='wrapper'&gt; &lt;button class='like-btn'&gt; &lt;span class='l...
React Fiber架构原理剖析
lt_xiaodou的博客
08-05 3248
在 React 16 之前，VirtualDOM 的更新采用的是Stack架构实现的，也就是循环递归方式。不过，这种对比方式有明显的缺陷，就是一旦任务开始进行就无法中断，如果遇到应用中组件数量比较庞大，那么VirtualDOM 的层级就会比较深，带来的结果就是主线程被长期占用，进而阻塞渲染、造成卡顿现象。为了避免出现卡顿等问题，我们必须保障在执行更新操作时计算时不能超过16ms，如果超过16ms，就需要先暂停，让给浏览器进行渲染，后续再继续执行更新计算。而Fiber架构就是为了支持“可中断渲染”而创建的。.
React Fiber 架构
subsistent的博客
08-17 232
React Fiber 是对 React 来说是一次革命，解决了 React 项目 严重依赖于手工优化 的痛点，通过系统级别的时间调度，实现划时代的性能优化。鬼才般的 Fiber 结构，为异常边界提供了退路，也为限量更新提供了下一个起点。增量渲染（把渲染任务拆分成块，均匀分布到多帧）更新时能够暂停、终止、复用渲染任务给不同类型的更新赋予优先级并发方面新的基础能力增量渲染用来解决掉帧的问题，渲染任务拆分之后，每次只做一小段，做完一段就把时间控制权交还给主线程，而不像之前长时间占用。
react-dev-tools
04-27
例如，React 16引入了Fiber架构，DevTools也随之进行了相应调整以支持新的渲染机制。 5. **与其他工具的协同工作** - **Redux DevTools**：与Redux DevTools结合使用，可以提供更全面的状态跟踪和时间线视图。 - ...
最适合初学者使用的react框架—UMI.js
weixin_34343308的博客
01-27 3519
介绍 最近接触到了一个新的react框架，大大省略了我开发的时间，而且学起来和上手都挺容易的。但论坛上关于这个框架的介绍并不多。我就大概介绍一下这个框架并写一些使用心得。 1.什么是umi 它是由dva的开发者云谦编写的一个新的React开发框架。它既是一个框架也是一个工具。简单的理解可以称它为一个类 next.js 的专注性能的前端框架。通过约定、自动生成和解析代码等方式来辅助开发，减少开发者要...
React框架基础
qq_45799465的博客
04-15 2657
一、概述 二、特点 三、react与与传统mvc的关系 四、浏览器扩展与vscode开发扩展安装 五、命令行构建项目 六、jsx 七、React事件处理 八、state状态 九、 Props进阶 十、表单处理
react组件使用格式
knowledge_bird的博客
04-01 426
react组件使用方法 react中组件开放也是有方法的，一般我们建议 父组件使用： import React, { Component } from 'react' class componentName extends Component { constructor(props) { super(props); } render() ...
自己动手搭建一个React框架——toyReact
yfm120750310的博客
09-05 964
toyReact框架搭建环境配置JSX 原理和关键实现 我们之前在博客上有提到 react的教程中tic-tac-toe游戏的案例，那么在篇博客中，我们主要要实现的是搭建自己的toyReact框架，将tic-tac-toe在toyReact框架中跑起来。 环境配置 包安装： npm install --save-dev webpack webpack-cli npm install --save-dev babel-loader @babel/core @babel/preset-env npm insta
实现最简单的 mini-react
weixin_71180960的博客
01-21 1216
之前我们创建了一个root 变量来存放根节点的，但是不能直接用它，它是处理commitWork(统一提交)时候用的，所以我们创建一个currentRoot变量来存放当前的根节点，在root 被清除之前给它赋值，也就是初始化完页面就赋值了，保证下次更新之前它就有值。react 的 render 函数也是同样的道理，如果我们在 render 函数中执行大量任务(dom 树过大的时候)，也会导致卡顿，所以我们需要对任务进行拆分，拆分成一个个小任务，然后依次执行，从而避免卡顿。
React 框架
热门推荐
敲代码的小李同学的博客
07-02 3万+
React 框架学习
DOM自定义属性 getAttribute、setAttribute、removeAttribute
xiasohuai的博客
10-15 2302
elementNode.attributes：属性返回包含被选节点属性的 NamedNodeMap。 elementNode.getAttribute(name)：方法通过名称获取属性的值。 elementNode.setAttribute(name, value)：方法创建或改变某个新属性。 elementNode.removeAttribute(name)：方法通过名称删除属性的值。  ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值