React-普通函数和函数组件的区别

Hello_Tom
765 阅读2分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第14天，点击查看活动详情

前言

最近在一些项目中看到，有使用普通JavaScirpt函数返回JSX元素的，也有使用函数组件来返回相关元素的。

它们这两种写法返回的元素有什么区别吗？什么时候使用才使用那个呢？那么下面就来学习一下。

函数组件和类组件

我们先来看下函数组件和类组件的共同点和不同点

  1. 首先他们都确定是一个组件，虽然他们最终转换为JS代码不一致，但他们渲染的结果最终都是一致的

    // 函数组件
function SayHi() { 
    return <p>Hello, React</p > 
} 
// 转换为JS代码
const result = SayHi(props) // » <p>Hello, React</p >
​
// 类组件
class SayHi extends React.Component { 
    render() { 
        return <p>Hello, React</p > 
    } 
} 
// 转换为JS代码 
const instance = new SayHi(props) // » SayHi {} 
const result = instance.render() // » <p>Hello, React</p >
  1. 在编写方式上，函数组件相对于类组件会更简洁一些
  2. 在状态管理上，在React引入Hooks之前，函数组件只能是无状态组件，内部不能定义state，但引入Hook之后，就于函数组件一致了。
  3. 类组件可以实习继承，函数组件则不可以，不过React官方并不推荐使用继承的方式，因为继承的灵活性、可扩展性相对于组合来说会比较差。

函数组件和普通函数

普通的函数他只是单纯返回一段JSX片段，当我们封装组件内部需要具有自身的状态时，就需要使用函数组件。

同时普通函数在其父元素渲染时，就会被执行，他被视为父元素的一部分，因此普通函数所持有的Hook等状态都会被视为父元素的Hook。例如下面的代码：

function FunctionComponent(){
    return <div>Hello,FunctionComponent</div>
}
​
​
function normalFunction(){
    return <div>Hello,normalFunction</div>
}
​
const root = ()=>{
    return (
            <div>
                <FunctionComponent/>
                {normalFunction()}
            </div>
    )
}

当root开始进行渲染的时候，normalFunction()方法就会被执行渲染，但FunctionComponent组件则没有被渲染。可以将普通函数理解为一段普通的HTML片段，而函数组件则是有逻辑的组件。

PS：当然普通函数并不是只能返回JSX片段，React有一种高级组件写法，即是参数为组件，返回值为新组件的函数。

avatar
文章
阅读
粉丝