# 手写react源码

**Repository Path**: xiaole9924/handwritten-react-source-code

## Basic Information

- **Project Name**: 手写react源码
- **Description**: 🥝 持续更新，用于学习
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-12-31
- **Last Updated**: 2022-01-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: react源码

## README

<!--
 * @Author: your name
 * @Date: 2022-01-01 14:21:08
 * @LastEditTime: 2022-01-01 15:03:07
 * @LastEditors: xiaole
-->
# 手写react元素渲染

#### 介绍  -持续更新，用于学习

### 封装createElement  创建虚拟dom方法

```javascript
React.createElement("span", null, "hellow")  
/**
 * 
 * @param {*} type 添加标签名
 * @param {*} config  标签的属性
 * @param {*} children  标签的子元素
 * @returns 返回虚拟DOM信息
 */
function createElement(type, config, children) {
    let props = { ...config }

    if(arguments.length>3) {
        children = Array.prototype.slice.call(arguments,2)

    }
    props.children = children

    return {
        type, props
    }
}

let React = {
    createElement,Component
}

```


### 封装render 将reactDOM添加到文档
```javascript
/**
 * 
 * @param {*} reactDOM 
 * @param {*} container 
 */
function render(reactDOM, container) {
    var dom = createDom(reactDOM)
    container.appendChild(dom)
}
```


### 封装createDom 将reactDOM转化为真是DOM节点
```javascript
/**
 * 
 * @param {*} reactDOM 
 * @returns 返回创建dom节点
 */
function createDom(dom) {
    if (typeof dom === 'string' || typeof dom === 'number') {
        return document.createTextNode(dom)
    }
    let { type, props } = dom
    let vDom
    if (typeof type == 'function') {
        if (type.isReactComponent) {
            return componentClassDom(dom)
        } else {
            return updataFunctionDom(dom)
        }

    } else {
        vDom = document.createElement(type)

    }
    updateProps(vDom, props) // 操作属性的

    if (typeof props.children == 'string' || typeof props.children == 'number') {
        vDom.textContent = props.children
    } else if (typeof props.children == 'object' && props.children.type) {
        render(props.children, vDom)
    } else if (Array.isArray(props.children)) {
        reconcilechildren(props.children, vDom)
    }
    return vDom
}

```
### 封装updateProps dom节点追加属性
```javascript
/**
 * 
 * @param {*} vDom 节点元素
 * @param {*} props 节点属性
 */
function updateProps(vDom, props) {
    for (let key in props) {
        if (key == 'children') continue;
        if (key == 'style') {
            let style = props[key]
            for (let key in style) {
                vDom.style[key] = style[key]
            }
        } else {
            vDom[key] = props[key]
        }
    }
}
```

### 封装reconcilechildren 当reactDOM存在子元素且是数组
```javascript
/**
 * 
 * @param {Array} childrens 子节点
 * @param {*} dom 父节点
 */
function reconcilechildren(childrens, dom) {
    childrens.forEach(children => render(children, dom))
}
```


# 手写react组件渲染
### 封装Component 使用extends创建的组件
```javascript
/**
 * props
 */
class Component {
    static isReactComponent = true
    constructor(props) {
        this.props = props
    }
}

export default Component
```

### 封装componentClassDom 解析继承组件转化为dom节点
```javascript
/**
 * @param {*Array*} dom ReactDom
 */
function componentClassDom(dom) {
    let { type, props } = dom
    let classComponent = new type(props)
    let ReactDom = classComponent.render()
    let newDom = createDom(ReactDom)
    classComponent.dom = newDom
    return newDom
}
```

### 封装updataFunctionDom 解析函数组件转化为dom节点
```javascript
/**
 * @param {*Array*} dom ReactDom
 */
function updataFunctionDom(dom) {
    let { type: Fn, props } = dom
    let reactDom = Fn(props)
    return createDom(reactDom)
}
```
# 手写react State状态更新

1231212312
# 手写react生命周期