手写 React 第 3 节 - 实现函数组件/类组件

迷南。 2022-11-21 01:05 139阅读 0赞

### 手写 React 第 3 节 - 实现函数组件/类组件 ###

*   *   *  前言
         *  1. 函数组件
         *  2. 类组件

### 前言 ###

在上一节[【手写 React 第 2 节 - 初探 React 实现机制】][React _ 2 _ - _ React]中实现了 type 类型为原生节点标签和文本节点类型的组件，本小节主要介绍如何实现函数组件和类组件。

### 1. 函数组件 ###

import React from './react/';
    import ReactDOM from './react/react-dom';
    import './index.css';
    function App(props) { 
        console.log(props);//{name:"jack"}
        return <div>
            <h1 className="border">Mini React</h1>
        </div>
    }
    ReactDOM.render(<App name="jack"/>,document.getElementById('root'));

以上 App 是一个函数组件。在 render 时需要对函数组件单独处理。

函数组件处理比较简单，只需要判断 type 类型为 function 时，调用 type 得到原生组件或者文本组件，处理方式相同。

需要注意的是函数组件的 props 参数传递。通过判断 props 是否包含有非 children 的其他属性，如果有，在调用时需要将 props 参数加上。

### 2. 类组件 ###

import React from './react/';
    import ReactDOM from './react/react-dom';
    import './index.css';
    class App extends React.Component{ 
        constructor(props){ 
            super();
            console.log(props);//{name:"jack"}
        }
        render(){ 
            return <div>
                <h1 className="border">Mini React</h1>
            </div>
        }
    }
    ReactDOM.render(<App name="jack"/>,document.getElementById('root'));

类组件的特点是会继承 Component 父类，并且会提供 render 方法来渲染内容。  
所以首先需要在 React 中创建一个父类。通过在原型上设置 isReactComponent 为 true 来供 type 判断是否为类组件。

function Component(props) { 
       this.props = props;
    }
    Component.prototype.isReactComponent = true;

与函数组件类似，不同的是 type 不是直接调用，而是通过 new 来创建实例，并且执行的是实例对象的 render 方法。同样地需要调用 addProps 方法将 props 传递。

[React _ 2 _ - _ React]: https://blog.csdn.net/weixin_44135121/article/details/109360907