React创建组件的两种常见方式

最新推荐文章于 2023-01-15 13:37:49 发布

fiona_0427

最新推荐文章于 2023-01-15 13:37:49 发布

阅读量195

点赞数

文章标签： react js

本文链接：https://blog.csdn.net/fiona_0427/article/details/107468575

版权

1.函数式定义(无状态组件)

import React from 'react';
function MyComponent(props){
　　return(
       <h1>mycomponent</h1>
    )
}
export default MyComponent;

2.es6中class类的方式（有状态组件）

import React, { Component } from 'react';
class MyConponent extends Component{
        constructor(props){
            super(props);
        }
        render() {
            return (
                <h1>mycomponent</h1>
            );
        }
    }
export default MyConponent;

　　1.函数式定义和类定义的对比

　　　　　　　函数式定义组件没有state和生命周期函数且不能访问this，而类定义中这些都可以有。

注意：无论使用哪种方式创建组件，组件名称的首字母都必须大小，因为我们写的是JSX，最后是需要通过babel转义成es5的语法的，而babel在进行转义JSX语法时，是调用了 React.createElement() 这个方法，这个方法需要接收三个参数：type, config, children。第一个参数声明了这个元素的类型，当创建自定义组件时没有首字母小写时，而 babel 在转义时把它当成了一个字符串传递进去了；当首字母大写时，babel 在转义时传递了一个变量进去。问题就在这里，如果传递的是一个字符串，那么在创建虚拟DOM对象时，React会认为这是一个原生的HTML标签，但是这显然不是一个原生的HTML标签，因此去创建一个不存在的标签肯定是会报错的。如果首字母大写，那么就会当成一个变量传递进去，这个时候React会知道这是一个自定义组件，因此他就不会报错了。