React 前端框架入门

React 前端框架入门

什么是 React？

React 是由 Facebook 开辟并开源的一个用于构建用户界面的 JavaScript 库。
它的核心特点是组件化和响应式更新，实用于单页应用 (SPA) 和复杂前端界面的开辟。
核心特性

• 组件化开辟
  
  
  
  • UI 被拆分为独立、可复用的组件。
    
  • 每个组件有自己的状态和生命周期。
    
  
  
• 声明式编程
  
  
  
  • 使用简单的代码形貌 UI。
    
  • React 会根据状态更新自动处置惩罚 DOM 变更。
    
  
  
• 虚拟 DOM
  
  
  
  • 进步性能：通过比力虚拟 DOM 和真实 DOM 的差异，只更新须要的部门。
    
  
  
• 单向数据流
  
  
  
  • 数据从父组件流向子组件，便于管理。
    
  
  
• React Hooks
  
  
  
  • 使函数组件也能拥有状态和生命周期特性。
    
  
  

基本概念

1. JSX

JSX 是一种在 JavaScript 中嵌入 HTML 的语法，雷同模板语言。

1. const element = <h1>Hello, React!</h1>;

复制代码

2. 组件

组件是 React 的底子单元，可以分为 函数组件 和 类组件。

• 函数组件
  

1. function Welcome(props) {
2.   return <h1>Hello, {props.name}!</h1>;
3. }

复制代码

• 类组件
  

1. class Welcome extends React.Component {
2.   render() {
3.     return <h1>Hello, {this.props.name}!</h1>;
4.   }
5. }

复制代码

3. State 和 Props

• Props: 用于从父组件向子组件转达数据，组件是只读的。
  
• State: 每个组件的内部状态，可随事件或操作动态变革。
  

4. 生命周期

React 提供了一系列生命周期方法，用于控制组件的渲染和更新过程。
生命周期阶段方法形貌挂载componentDidMount初始化后运行，如数据请求。更新componentDidUpdate状态或属性更新后运行。卸载componentWillUnmount清理工作，如取消订阅。 5. React Hooks

Hooks 是函数组件的新特性，用于处置惩罚状态和生命周期。

• 使用 useState 管理状态
  

1. import React, { useState } from "react";
3. function Counter() {
4.   const [count, setCount] = useState(0);
5.   return (
6.     <div>
7.       <p>你点击了 {count} 次</p>
8.       <button onClick={() => setCount(count + 1)}>点击我</button>
9.     </div>
10.   );
11. }

复制代码

• 使用 useEffect 管理副作用
  

1. import React, { useEffect } from "react";
3. function Example() {
4.   useEffect(() => {
5.     console.log("组件已挂载");
6.     return () => {
7.       console.log("组件已卸载");
8.     };
9.   }, []);
10.   return <div>Hello, Hooks!</div>;
11. }

复制代码

React 应用示例

以下是一个简单的计数器应用：

1. import React, { useState } from "react";
2. import ReactDOM from "react-dom";
4. function Counter() {
5.   const [count, setCount] = useState(0);
7.   return (
8.     <div>
9.       <h1>计数器</h1>
10.       <p>当前计数：{count}</p>
11.       <button onClick={() => setCount(count + 1)}>增加</button>
12.       <button onClick={() => setCount(count - 1)}>减少</button>
13.     </div>
14.   );
15. }
17. ReactDOM.render(<Counter />, document.getElementById("root"));

复制代码

项目结构

React 项目通常使用 Create React App 创建，其默认结构如下：

1. my-app/
2. ├── src/
3. │   ├── App.js         # 主组件文件
4. │   ├── index.js       # 入口文件
5. │   ├── components/    # 自定义组件目录
6. │   └── styles/        # 样式文件
7. ├── public/
8. │   └── index.html     # HTML 模板
9. ├── package.json       # 项目依赖和配置

复制代码

如何启动 React 项目

• 安装 Node.js 和 npm。
  
• 创建 React 项目：
  1. npx create-react-app my-app
  2. cd my-app

  复制代码
• 启动项目：
  1. npm start

  复制代码

参考资料

• React 官方文档
  
• React 中文文档
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。