React 18引入了hooks，这是一种让函数组件拥有类组件的功能的方式。使用hooks，函数组件可以拥有状态管理、生命周期方法、副作用处理等功能，使得函数组件具有了和类组件类似的能力。hooks可以让函数组件更加灵活和易于管理，同时也减少了代码的复杂性。常见的hooks包括useState、useEffect、useContext等，它们可以让函数组件更加强大和易于编写。

useState 

useState 是一个 React Hook，它允许你向组件添加一个 状态变量。

格式：const [state, setState] = useState(initialState)

export default function App() {// 调用useState 添加一个状态变量// 第一个参数式状态变量// 第二个参数 修改状态变量的方法const [count, setCount] = useState(0);const [span,setSpan] =useState("zhangsan")function add() {setCount(count + 1);setSpan('lisi')}return (<div><Hell />{span}: {count}<button onClick={add}>+1</button></div>);
}

规则：状态不可变

在react中，状态被认为是只读的，我们应该始终替换他而不是修改它，直接修改状态不能引发视图更新

classNames

如何有条件地应用多个 CSS 类？ 

要有条件地应用 CSS 类，你需要使用 JavaScript 自己生成 className 字符串。

例如，className={'row ' + (isSelected ? 'selected'：'')} 将会生成 className="row" 还是 className="row selected" 取决于 isSelected 是否为 true。

   className = {classNames("nav-item", {active: type === i.type,})}

useRef

useRef 是一个 React Hook，它能帮助引用一个不需要渲染的值

// 1. useRef 生成ref对象 绑定在dom标签上
// 2 dom 可用时，ref.current 获取dom
// 渲染完成之后dom生成之后才可用
export default function App() {const inRef = useRef(null)const getRef =()=>{console.dir(inRef.current.value);}return (<div><input type="text" ref={inRef} /><button onClick={getRef}>获取</button></div>)
}

父子通信

import React from "react";
import {useState} from 'react'function Sun(props) {let zi = "我是子组件上的数据";return (<div><p>{props.hello}</p><buttononClick={() => {props.getFu(zi);}}>传递</button></div>);
}function Zi(props) {return <div>{props.children}</div>;
}// props 可传递任意的数据
// props 是只读对象
// 不能进行直接修改，父组件的数据只能由父组件修改export default function App() {const [zi,updateZi] = useState('');let hello = "hello world!";let getFu = (i) => {updateZi(i)};return (<div><p>{zi}</p>{/* 正常传递方式 父先子传递 变量名 = 值 子传父 自定义方法名 = 函数方法 */}<Sun hello={hello} getFu={getFu} />{/* children  当我们把内容嵌套再子标签上父组件会自动为children的props属性中接收该内容*/}<Zi><span>我是谁!</span></Zi></div>);
}

兄弟通信

function A({ onGetAName }) {// Son组件中的数据const name = "this is A name";return (<div>this is A compnent,<button onClick={() => onGetAName(name)}>send</button></div>);
}function B({ name }) {return (<div>this is B compnent,{name}</div>);
}function App() {const [name, setName] = useState("");const getAName = (name) => {console.log(name);setName(name);};return (<div>this is App<A onGetAName={getAName} /><B name={name} /></div>);
}