react 组件,react组件的写法有哪些

以下内容主要是针对遇上react组件的写法有哪些等问题，我们该怎么处理呢。下面这篇文章将为你提供一个解决思路，希望能帮你解决到相关问题。

1、ES6类组件

ES6类组件是React官方推荐的组件书写方式，使用ES6 class语法定义组件，它是一种面向对象的组件定义方式，可以使用类的方式定义组件，使用extends关键字继承React.Component类，重写render方法，定义组件的渲染内容，返回JSX语法，如下：


class Hello extends React.Component {
    render() {
        return (
            Hello React!
        )
    }
}

函数式组件，也叫无状态组件，它是一种简单的无状态组件，它是以函数的形式定义组件，函数的参数是props，函数体可以返回一个React元素，或者null，如下：


function Hello(props) {
    return (
        Hello React!
    )
}

React Hooks是React 16.8新增的特性，它可以让函数式组件也能够使用状态和其他React特性，它提供了一些自定义Hooks，可以把组件逻辑拆分成更小的函数，如下：


import { useState } from 'react';

function Hello() {
    const [count, setCount] = useState(0);
    return (
        Hello React! {count}
    )
}

React.memo是React 16.6新增的特性，它可以针对函数式组件做性能优化，它可以把函数式组件包裹起来，当props没有发生变化时，React.memo会记住上一次渲染的结果，直接返回，而不会再次渲染，如下：


const Hello = React.memo(function Hello(props) {
    return (
        Hello React!
    )
});

以上就是为你整理的react组件的写法有哪些全部内容，希望文章能够帮你解决相关问题，更多请关注本站相关栏目的其它相关文章！