reactjs：常规/箭头函数和反应函数组件之间的差异

Question

您在常规/箭头功能和反应功能组件之间看到什么区别

反应功能组件

import React from 'react';

function MyComp(){

   return <span>test</span>

}

常规功能

function myFun(){

   return null;

}

Answer 1

从概念上讲，组件就像 JavaScript 函数。它们接受任意输入（称为props）并返回描述应在屏幕上显示的内容的 React 元素。function Welcome(props) {&nbsp; return <h1>Hello, {props.name}</h1>;}从 JavaScript 的角度来看，这只是一个函数，除了一个特殊的返回。它是 JSX，每个 JSX 元素只是调用的语法糖React.createElement(component, props, ...children)。基本上，您可以将上面示例中的 JSX 替换为：React.createElement('h1', null, `Hello ${props.name}`);这不过是一个 JavaScript :)然后你可以渲染你的组件：const element = <Welcome name="Sara" />;ReactDOM.render(&nbsp; element,&nbsp; document.getElementById('root'));你ReactDOM.render()用<Welcome name="Sara" />元素调用。React 调用 Welcome 组件{name: 'Sara'}作为 props。我们的 Welcome 组件返回一个<h1>Hello, Sara</h1>元素作为结果。React DOM 有效地更新 DOM 以匹配<h1>Hello, Sara</h1>，并且您可以在屏幕上看到它。React 功能组件有一个重要要求！始终以大写字母开头组件名称。React 将以小写字母开头的组件视为 DOM 标签。例如，表示一个 HTML div 标签，但表示一个组件，并且需要 Welcome 在范围内。您示例中的此功能可用作功能组件：function MyFun() { // name should start with a capital&nbsp; &nbsp;return null;}React 不会显示任何内容，因为如果组件返回 null，React 不会呈现。