react的组件书写方式和Fragment

react的组件书写方式和Fragment

函数式

    //第一种写法
import React from ' react ';
    
    function add () {
        return (
            <div></div>//这里写的是标签
        )
    };
    
    //第二种写法
    const add = function () {
        return (
            <div></div>
        )
    };
    
    //第三种写法
    const add = () =>{
        return (
            <div></div>
        )
    };
    
    //最后要记得到处组件，然后在index.js中引入使用
    export default add;

class类组件

import React from ' react ';

//  class类的首字母必须大写
class add extends React.Component{
    render() {//   render（）函数
        return (
            <div></div>//  html结构
        )
    }
}
export default add;

Fragment由于每个React组件只能有一个根节点，所以要渲染多个组件的时候，需要在最外层包一个容器，如果使用div, 会生成多余的一层dom如果不想生成多余的一层dom可以使用React提供的Fragment组件在最外层进行包裹

    import { Fragment } from ' react '
    
    const add = () =>{
        return (
            <Fragment>//相当于<></>,语法糖
                <div></div>
                <div></div>
            </Fragment>
        )
    }
    
     const add = () =>{
        return (
          <>
                <div></div>
                <div></div>
           </>
        )
    }