8、React 开发中的 JSX 与数据状态管理

React 开发中的 JSX 与数据状态管理

1. 认识 JSX

JSX 是一种类似 XML 的 JavaScript 扩展，它让我们能以更简单、更熟悉的方式编写 React 组件。以下是一段使用 JSX 的代码示例：

comments={data.comments}   
post={data.post}
/>,
node
);

代码清单 2.11 的完整代码可在线查看：https://codesandbox.io/s/vnwz6y28x5 。

2. JSX 的优点及与 HTML 的区别

• 优点 ：
  • 与 HTML 相似且语法更简单 ：如果反复编写 React.createElement 让你觉得繁琐，或者嵌套结构难以理解，那么 JSX 会是一个很好的解决方案。JSX 与 HTML 相似，能让你以熟悉的方式声明组件结构，显著提高代码的可读性。
  • 声明式且封装性好 ：将构成视图的代码与相关方法放在一起，形成一组功能。基本上，关于组件的所有信息都集中在一处，没有不必要的隐藏信息，这使得你能更轻松地理解组件，并全面了解其作为一个系统的工作方式。
• 与 HTML 的区别 ：
  • HTML 标签与 React 组