在快速发展的 Web 开发世界中，React 仍然是构建动态和高性能用户界面的基石。无论您是经验丰富的开发人员还是刚刚起步的开发人员，了解 React 的核心概念对于充分发挥其潜力至关重要。在本文中，我们将探讨 React 的基本原理，从它的库状态到 hooks 的强大功能，并为您提供增强 React 技能的清晰基础。让我们深入了解一下！ ？

1. React 是框架还是库？

React 是一个 JavaScript 库，而不是一个框架。与提供一套全面的工具并强制执行构建应用程序的特定方式的框架不同，React 专注于一个特定的方面——UI 渲染。这使得 React 高度灵活和流行，因为它遵循 Unix 哲学，做一件事并做好它。

2.虚拟 DOM

DOM 代表文档对象模型，简单来说代表应用程序的 UI。每次我们更改 UI 时，DOM 都会更新以表示该更改。 DOM 表示为树形数据结构。当我们更改 UI 时，DOM 会重新渲染并更新其子项。 UI 的重新渲染使应用程序变慢。

对于此解决方案，我们使用虚拟 DOM。虚拟 DOM 只是 DOM 的虚拟表示。当应用程序的状态发生变化时，虚拟 DOM 而不是真实的 DOM 会被更新。

虚拟 DOM 每次都会创建一棵树，元素都表示为一个节点。如果任何元素发生变化，就会创建一个新的虚拟 DOM 树。然后将新树与前一树进行比较或“差异”。

在此图中，红色圆圈代表已更改的节点。这些节点代表更改状态的 UI 元素。然后比较之前的树和当前改变的树。更新后的树然后批量更新到真实的 DOM。这使得 React 作为高性能 JavaScript 库脱颖而出。

总之：

1. 整个虚拟 DOM 被更新。
2. 虚拟 DOM 与更新之前的样子进行比较。 React 找出哪些对象发生了变化。
3. 更改的对象，并且仅更改的对象，会在真实 DOM 上更新。
4. 真实 DOM 的变化会导致屏幕发生变化。

3. JSX

JSX (JavaScript XML) 允许您在 React 中编写类似 HTML 的代码。它使用 React.createElement( component, props, …children) 函数将 HTML 标签转换为 React 元素。

例如：
JSX代码：

  Hello, Good Morning!

本例编译为：

React.createElement(
  MyText,
  { color: 'red' },
  'Hello, Good Morning!'
)

注意：用户定义的组件必须以大写字母开头。小写标签被视为 HTML 元素。

4. JSX 中的道具

在 JSX 中可以通过多种方式指定属性：

JavaScript 表达式作为 Props：

此处，props.sum 的计算结果为 6。

字符串文字：

上面的两个例子是等效的。

Props 默认为“True”
如果我们不传递 prop 的值，则默认为 true。

例如，

上面的两个例子是等效的。

5.类组件

React 中的组件可以定义为类或函数。以下是定义类组件的方法：

class Greetings extends React.Component {
  render() {
    return 
Hello, {this.props.name}
;
  }
}

6。组件生命周期

组件具有生命周期方法，您可以重写这些方法以在特定阶段运行代码：

安装： 当组件被创建并插入到 DOM 中时。

• 构造函数()
• 使成为（）
• componentDidMount()

更新：当道具或状态改变时。

• 使成为（）
• componentDidUpdate()

卸载：当组件从 DOM 中移除时。

• componentWillUnmount()

7.类属性

defaultProps 允许您定义 props 的默认值：

class MyText extends React.Component {
  // Component code here
}

MyText.defaultProps = {
  color: 'gray'
};

如果没有提供 props.color，则默认为 'gray'。

8.道具类型

我们可以使用 prop-types 来检查组件传递的属性的类型。当它们不匹配时，它会给出错误。

import PropTypes from 'prop-types';

const studentPropTypes = {
  studentName: PropTypes.string,
  id: PropTypes.number
};

const props = {
  studentName: 'Asima',
  id: 'hi' // Invalid
};

PropTypes.checkPropTypes(studentPropTypes, props, 'prop', 'MyComponent');

这将警告 id 的类型不匹配。

9.优化性能

React 是为了性能而设计的，但你可以进一步优化它：

使用生产构建：

npm run build

这将创建一个经过优化的生产版本。

最小化源代码：谨慎对待 React 源代码的更改。

代码分割：将 JavaScript 代码捆绑成块以根据需要加载。

10.反应钩子

Hooks 是允许您在函数组件中使用状态和其他 React 功能的函数。两个最受欢迎的钩子是：

useState: 向功能组件添加状态。

function Example() {
  const [count, setCount] = useState(0);

  return (
    

      
You clicked {count} times
       setCount(count   1)}>Click me
    
  );
}

useEffect: 管理函数组件中的副作用。

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    

      
You clicked {count} times
       setCount(count   1)}>Click me
    
  );
}

React 不断发展以满足现代 Web 开发的需求，掌握其核心概念对于构建高效、可扩展的应用程序至关重要。从理解 React 作为一个库如何脱颖而出，到利用功能组件的钩子的力量，这些基础知识将帮助您走上熟练 React 的道路。

当您继续在项目中探索和实施 React 时，请记住，及时了解最新的实践和功能将使您在不断变化的技术领域保持领先地位。如果您发现本文有价值，请不要忘记点赞并与渴望加深 React 知识的其他开发人员分享！

感谢您的阅读，祝您编码愉快！ ？