class => className
<div style={{ background: "red" }}>  # 内嵌样式

return (
        <ul>
          {list.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      )Copy

约定1：函数名字必须大写字母开头
约定2:函数必须有返回值
返回null表示不渲染内容Copy

约定1：类名必须大写字母开头
约定2：类组件必须继承React.Compont
约定3：类组件必须提供render()，返回值就是组件的jsxCopy

import Home from './pages/Home'
import {user} from './pages/CityList'
import './index.scss'  // 直接引入样式文件Copy

function handleClick(e){e.preventDefault()}Copy

<button onClick={jumpToDeposit(item)}>Deposit</button> # 这样写，button渲染的时候就执行了jumpToDeposit(),点击的时候不会执行
<button onClick={(e)=>{jumpToDeposit(item)}}>Deposit</button> # 这样写才行，button渲染时得到闭包函数，函数里面执行jumpToDeposit()Copy

this.setState({count:this.state.count+1})
//不能直接修改
this.state.count++ //错误Copy

<Hello name="jack" age={19}>这是组件子节点</Hello>

func Hello(props) {
    return (
    <div>
        接收到数据{props.name}
        组件中的子节点{props.children}
        组件的默认值{props.pageSize}
    </div>
    )    
}

// 给组件添加默认值
Hello.defaultPros={
    pageSize:10
}Copy

class Hello extends React.Component{    
    state = {
        list:[]
    }  
    render(){
        return (<Child list={this.state.list} />)
    }
}Copy

class Hello extends React.Component{ 
    receiveMsg =(data)=>{
        console.log("接收到数据", data)
    }
    render(){
        return (<Child receiveMsg={this.receiveMsg} />)
    }
}

class Child extends React.Component{
    state={
        msg:"hello world"
    }
    handleClick = ()=>{
        this.props.receiveMsg(this.state.msg)
    }
    render(){
        return (<div onClick={this.handleClick}>发送数据给父组件</div>)
    }
}Copy

constructor() -> render() ->componentDidMount()Copy

render() -> componentDidUpdate()Copy

componentWillUnmount(), 一般是执行清理工作，比如定时器Copy

// 通过传入回调函数来更新state
this.setState((state,props)=>{
    return {count: state.count+1}
})
// 想在状态更新后并且重新渲染后，立即执行逻辑，可以在setState第二个参数传入callback
this.setState(
    (state,props)=>{},
    ()=>{
       document.title="更新state后" 
    }
)Copy

shoudComponentUpdate(nextprops,nextState) //钩子函数，返回fasle表示组件不会重新渲染,可以对比this.state和nextState的值，判断有些情况是不用重新渲染的Copy

yarn add react-router-domCopy

import {BrowserRouter as Router, Routes, Route, Link} from 'react-router-dom'Copy

<Router>
        <Link to="/first">页面一 </Link>
        <Link to="/second">页面二</Link>
        <Routes>
            <Route path="/first" element={<Page1/>} />
            <Route path="/second" element={<Page2/>} />
        </Routes>
</Router>Copy

<Link to='/params' state={{id:1}} />

// 接受路由参数
import {useLocation} from 'react-router-dom'
function UseParams() {
    const location = useLocation()
    console.log(location.state.id)
    return (
        <div>UseParams</div>
    )
}
export default UseParamsCopy

<Link to="/first" 页面一>Copy

<Routes>
    <Route path="/first" element={<Page1/>} />
</Routes>Copy

layout
    about
  contentCopy

import {Outlet} from 'react-router-dom'

function Layout() {
    return (
        <div>
            Layout
            <Outlet/> // 二级路由出口
        </div>
    )
}

export default Layout;Copy

 // 1.定义嵌套路由
<Route path='/' element={<Layout />}>
    <Route path='about' element={<About />} />
    <Route path='content' element={<Content />} />
</Route>Copy

<Route path='/' element={<Layout />}>
    <Route index element={<About />} /> 
    <Route path='content' element={<Content />} />
</Route>Copy

<Routes>
   <Route path='/login' element={<Login/>} />
   {/* 所有路由都没有匹配时，显示nofound组件 */}
   <Route path='*' element={<NoFound />} />
 </Routes>Copy

// 1.import 跳转函数
import { useNavigate } from 'react-router-dom';
function Login() {
    // 2. 获取跳转函数
    const navigate = useNavigate()
    function goAbout() {
        // 3.执行跳转
        navigate('/about')
    }
    return (
        <div>
            Login
            <button onClick={goAbout}>跳转到about</button>
        </div>
    )
}
export default Login;Copy

1.searchParams传参
navigate(/about?id=1)
读取取参数
const [params] = useSearchParams() // 返回的是数组
let id = params.get('id')

2. 通过state传参
const jumpToDeposit = (item)=>{
    navigate('/deposit', {state:{id:item.ID,
      playA:item.PlayA,
      playB:item.PlayB,
      playAID:item.PlayAID,
      startTime:item.StartTime,
      contractAddr:item.ContractAddr
    }})
  }
读取参数
const location = useLocation()
console.log(location.state) // 读取到传递的对象Copy