学习react的一点点知识
关于react框架
React是一个由Facebook开发并维护的开源JavaScript库，用于构建用户界面，特别是单页应用。它为开发复杂、大型和动态的JavaScript应用程序提供了一个基础框架。
React的主要特点包括：
-
组件化：React采用组件化模式，开发者可以将复杂的UI破解成一些小的、独立的、可复用的组件，这样不仅使开发变得更简单，也达到了代码复用的效果。
-
虚拟DOM（Virtual DOM）：React中引入了一种可以提高渲染性能的技术，即虚拟DOM。简单来说，就是在JavaScript和真实DOM中间加了一个缓存。当状态变更时，React首先通过比对新旧虚拟DOM差异（Diffing Algorithm）计算出最小的变更，然后批量、高效地更新到真实DOM。
-
声明式编程：在React中，开发者只需描述应用在任一特定状态下的UI呈现情况，而无需关注过程。
-
单向数据流：React实现了单向响应的数据流，这使得组件的状态预测变得更容易。
React不是一个完整的MVC/MVVM框架，它更多地是关注视图（View）。为了构建完整的前端应用，React通常会配合其他库使用，如Redux进行状态管理，React Router进行路由管理等。
组件化
创建一个组件
function MyButton() {
return (
<button>I'm a button</button>
);
}
添加一个组件
<MyButton />
通过ReactDOM.render 会在某个 DOM 元素下面渲染 HTML 内容
ReactDOM.render(
<div>
<h1>学习react</h1>
<h2>学不好，就去睡觉</h2>
<div>好了</div>
</div>,
document.getElementById('root'),
)
看代码的时候可以先看render，也可以先看state的变更
使用js代码
{} 里面可以使用 js 的语法, 如变量、注释 也可以用 {} 把代码中的变量展示给用户，或者作为变量传递
使用JSX
大部分react项目都会使用JSX，JSX会比html更加严格
添加样式
因为 class 是关键字, 所以使用 className 表示 HTML 里面的 class
响应事件
function MyButton() {
function handleClick() {
alert('You clicked me!');
}
return (
<button onClick={handleClick}>
Click me
</button>
);
}
在组件中，声明事件处理函数来响应时间
更新界面
在react中，需要使用state来更新界面 只能用类方法来使用state
constructor(props) {
// 如果用了 constructor, 就要调用 super(props)
super(props)
this.state = {
showNote1: true,
showNote2: true,
}
}
而state的状态只能由setState来改变
this.setState({
showNote1: !this.state.showNote1,
})
每次更新state发生了改变，就会调用render方法 不显示信息的时候，可以把信息直接设置为null
更改state的时候就会自动调用render方法
生命周期
举几个栗子
componentDidMount()
componentDidMount 会在组件被render之后执行，而且只执行一次
componentWillUnmount（）
componentWillUnmount 会在组件 移除 之后执行，而且只执行一次。
类与函数
其实都一样，觉得什么方便用什么。 在类中，会在改变state的时候改变渲染，在函数中需要使用到Hooks特性。 比如下面的useState的hooks，前面的值用来储存数据，而后面的值相当于setState，改变时就会 重新渲染。
import { useState } from 'react'
const MyButton = () => {
const [count, setCount] = useState(0)
const handleClick = () => {
setCount(count + 1)
}
return (
<button onClick={ handleClick }>
Clicked {count} times
</button>
)
}
在hooks中也可以实现上面的生命周期，只要在useEffect()中返回一个函数即可。
