开发
进入到了react项目，我想我们可能就要改变一些观点了，在我们原来的html+js+css开发中，我们都是以基本的标签来完成对页面的构建。而在React中呢，我们将使用组件化的开发思路。
组件化开发
组件化开发不仅能提高代码的复用性，还能使得我们的代码更加模块化，易于维护。
在React中，页面的每一个部分都可以被视为一个组件，组件可以是一个按钮、一个表单、甚至是整个页面。通过将页面划分为不同的组件，我们可以更加清晰地组织代码，并且需要的时候复用这些组件。比如一个按钮可能在多个页面中反复使用。
JSX语法
既然都升级到组件了，我们的开发方式可能也有些不同，在React中，我们使用JSX语法来写组件，它看起来像是HTML，但实际上是JS的一种扩展。我们可以在JS中写HTML代码。
组件同时也分为函数组件和类组件
- 函数组件：函数组件是定义组件的一种简单且常见的方法，特别适用于无状态或只包含少量状态逻辑的组件。适合无状态或状态简单的场景。
// 引入 AppHeader 组件
import AppHeader from './components/app-Header';
// 定义 App 组件
const App = () => {
// 返回 JSX 结构，这个结构会渲染到页面上
return (
<div className="container">
{/* 使用引入的 AppHeader 组件 */}
<AppHeader />
</div>
);
};
// 导出 App 组件，使其可以在其他文件中被引入和使用
export default App;
- 类组件：类组件是通过扩展
React.Component类来定义的。这种方法通常用于需要更多生命周期方法的组件。
import React, { Component } from 'react';
class MyComponent extends Component {
//`render` 方法是类组件必须实现的一个方法，它返回一个 JSX 结构。
render() {
return (
<div>
<h1>Hello, world!</h1>
</div>
);
}
}
// 导出，使其可以在其他文件中被引入和使用。
export default MyComponent;
再提醒一下喔：在类组件中必须要实现一个render方法，并且返回JSX结构（也就是你写的HTML） 不同的是在JSX结构中class需要用classname来代替
状态管理
不同的组件对于状态管理的方法也略有不同，在React项目中，我们不必像之前那样刷新页面来更新，更多的是响应式的。
对于函数组件呢，可以使用useState Hook 管理状态
简单的小例子：
import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
};
export default Counter;
import { useState } from 'react'：导入useStateconst [count, setCount] = useState(0)：定义一个count和setCount，初始化count为0<button onClick={() => setCount(count + 1)}>：这里将setCount设置为一个函数，绑定在button标签上。
类组件的状态管理
对于类组件，可以在构造函数中初始化状态，并且使用this.setState来更新状态
import React, { Component } from 'react';
class Counter extends Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
incrementCount = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={this.incrementCount}>
Click me
</button>
</div>
);
}
}
export default Counter;
相信你应该了解了怎么使用吧，并且呢，在函数组件和类组件的示例代码中，还使用了不同的事件绑定方法。不知道你有没有注意到。
在函数组件中呢使用的是： onClick={handleClick} ；类组件组件则是onClick={this.handleClick} 细微的小差别。
props传值
使用 props 传递值
有时候我们需要在各个组件之间传递一些数据来完成逻辑交互，最常见的方法是通过 props 传递值。这是父组件向子组件传递数据的标准方式。父组件通过在子组件标签上设置属性，将数据传递给子组件。子组件通过访问 props 对象来获取这些数据。当我们有多个子组件需要用到相同的数据时，我们就可以把数据放在上一级共同的父组件里，也叫做状态提升
