从JSX呈现和从函数呈现有什么不同？

从JSX呈现和从函数呈现在React中是两种不同的组件编写方式。

1. JSX呈现： JSX呈现是一种类似HTML的语法扩展，允许在JavaScript代码中直接编写组件结构。它可以更直观地描述组件的结构和外观，并且易于理解和调试。使用JSX呈现组件时，需要使用React.createElement方法将JSX代码转换为真实的React元素。

示例代码：

import React from 'react';

const MyComponent = () => {
  return <div>Hello, World!</div>;
}

export default MyComponent;

1. 函数呈现： 函数呈现是一种更简洁的组件编写方式，它是使用纯JavaScript函数来定义组件。函数组件只需要返回一个React元素，它没有自己的状态，也没有生命周期方法。函数呈现组件更轻量化，适用于简单的展示型组件。

示例代码：

import React from 'react';

function MyComponent() {
  return <div>Hello, World!</div>;
}

export default MyComponent;

两种呈现方式的区别如下：

1. 语法：JSX呈现使用类似HTML的标签语法，而函数呈现使用函数声明的语法。
2. 功能：JSX呈现可以使用完整的React组件功能，例如生命周期方法、状态管理等。而函数呈现只是一个返回React元素的函数，没有自己的状态或生命周期。
3. 性能：函数呈现组件比JSX呈现组件具有更好的性能，因为函数呈现组件没有自己的实例，不需要进行实例化和挂载过程。
4. 代码量：函数呈现组件相对更简洁，适用于简单的展示型组件。而JSX呈现组件可以更灵活地处理复杂的逻辑和渲染。

推荐的腾讯云相关产品：无

参考链接：

• JSX介绍：https://zh-hans.reactjs.org/docs/introducing-jsx.html
• 函数式组件介绍：https://zh-hans.reactjs.org/docs/components-and-props.html#function-and-class-components