yt88加密狗复制

2021-10-18 19:00:10 阅读：2150 来源： 互联网

标签：const 加密狗代码 yt88 element React 复制 children

yt88加密狗复制的方法分享，本文通过手写一个简易版 React，对 React 基本原理有一个直观的认识；
实现的版本为16.8，基于pomb.us/build-your-…；
学习前提需要有React基础；
2、实现目标

createElement；
render；
并发模式；
Fibers；
渲染和提交；
协调；
函数组件；
hooks；
类组件

学习建议：yt88加密狗复制，对照着文章查看，尽量动手实现一遍。
3、createElement实现
3.1 思考
在React17之前，我们写React代码的时候都会去引入React，不引入代码就会报错，而且自己的代码中没有用到React，这是为什么呢？带着这个问题我们向下学习；
import React from ‘react’
复制代码
3.2 element变量解析
我们先创建一个element变量，将本段代码放到babel上查看编译结果：
const element =

Hello

复制代码
通过babel会编译成下面这种形式：

经过编译后的代码为：
const element = React.createElement(“div”, {
title: “foo”
}, “Hello”);
复制代码
element参数说明：

dom元素
属性
children子元素

解答一下开篇提出的问题：引入React的作用，使用React进行解析JSX，如果不引入React，上面代码就会报错。JSX实际上是一个语法糖，它真正是需要解析成js代码来执行；
3.3 创建项目
我们先来创建执行命令：
npm init
复制代码
安装相关的依赖：
npm install --save-dev babel-loader @babel/core
npm install webpack --save-dev
npm install --save-dev @babel/preset-react
npm install --save-dev html-webpack-plugin
复制代码
创建项目目录：

配置webpack：
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);

module.exports = {
entry: {
main: ‘./src/index.js’
},
devServer: {
port: 9000,
},
module: {
rules: [
{
test: /.js$/,
use: {
loader: ‘babel-loader’,
options: {
presets: [’@babel/preset-env’],
plugins: [’@babel/plugin-transform-react-jsx’]
}
}
}
]
},
mode: “development”,
optimization: {
minimize: false
},
plugins: [
new HtmlWebpackPlugin({
title: ‘React’,
}),
],
}
复制代码
加入启动命令：

3.4 打印结果值
yt88加密狗复制.创建一个真实的React项目，使用create-react-app，本文就不在叙述安装过程。再来看看上文的 React.createElement 实际生成了的是什么？打印一下element：
import React from ‘react’;
import ReactDOM from ‘react-dom’;

const element =

Hello

console.log(element)

const container = document.getElementById(“root”)
ReactDOM.render(element, container)
复制代码
打印结果：

简化一下，将其他属性刨除（其他属性我们不关心）：
const element = {
type: “h1”,
props: {
title: “foo”,
children: “Hello”,
},
}
复制代码
简单总结一下，React.createElement 实际上是生成了一个 element 对象，包含两个属性对象 type 和 props ，该对象拥有以下属性：
element对象参数：

type：标签名称
props：属性

title：标签属性
children：子属性

3.5 render简单流程
提前了解一下render的简单流程：

ReactDOM.render() 将 element 添加到 id 为 root 的 DOM 节点中，我们接下来实现这个方法来代替React源码中的 ReactDOM.render()方法；

示例代码：
const element = {
type: “h1”,
props: {
title: “foo”,
children: “Hello”,
},
}
复制代码
1.首先，我们使用元素类型创建一个节点（element.type），在本例中是 h1；
const node = document.createElement(element.type)
复制代码
2.设置节点属性为title；
node[“title”] = element.props.title
复制代码
3.只有一个字符串作为子节点，我们创建一个文本节点，并且设置文本节点的nodeValue为element.props.children；
const text = document.createTextNode("")
text[“nodeValue”] = element.props.children
复制代码
4.最后，我们将 textNode 附加到 h1，并将 h1附加到容器；
node.appendChild(text)
container.appendChild(node)
复制代码
3.6 createElement实现（虚拟DOM）
用我们自己的代码实现React的代码；

从上文了解到createElement的作用是创建一个element对象：
const element = {
type: “h1”, //标签
props: {
title: “foo”, // 属性
children: “Hello”, // 节点
},
}
复制代码
调用方式：
const element = React.createElement(“div”, {
title: “foo”
}, “Hello”);
复制代码
根据调用和返回结果，设计createElement函数如下：
// react/createElement.js

/**

创建虚拟DOM结构
@param {*} type 标签
@param {*} props 属性
@param {…any} children 自己诶单
@returns 虚拟DOM结构
*/
export function createElement(type, props, …children) {
return {
type,
props: {
…props,
children: children.map(child =>
typeof child === “object”
? child
: createTextElement(child) //不是对象说明是文本节点
),
},
}
}

/**

当children为非对象时，创建文本节点
@param {*} text 文本值
@returns 虚拟DOM结构
*/
function createTextElement(text) {
return {
type: “TEXT_ELEMENT”,
props: {
nodeValue: text,
children: [],
},
}
}
复制代码
为了直观的展示，我们更改一下element结构：
const element = (

bar ) 复制代码测试一下： // src/index.js import React from '../react';
const element = (
bar )
console.log(element

标签：const,加密狗,代码,yt88,element,React,复制,children
来源： https://blog.csdn.net/chunzhenwang/article/details/120832163

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

yt88加密狗复制

Hello

Hello