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

Question

您在常规/箭头功能和反应功能组件之间看到什么区别反应功能组件import React from 'react';function MyComp(){   return <span>test</span>}常规功能function myFun(){   return null;}

Answer 1

从概念上讲，组件就像 JavaScript 函数。它们接受任意输入（称为props）并返回描述应在屏幕上显示的内容的 React 元素。

function Welcome(props) {

  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(

  element,

  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

   return null;

}

React 不会显示任何内容，因为如果组件返回 null，React 不会呈现。