一.安装

1.传统方式

npm i -g create-react-app
npx create-react-app demo1

2.vite

pnpm create vite

二.基本语法 （原则-模板精简）

1. 表达式

2. 列表

3. 条件

4. 样式控制 动态类名

let name="gz";
let flag=true;
let course=[{
  id:1,
  name:"zhangsan"
},
{
  id:2,
  name:"lisi"
}]

function isFlag(){
  return flag?"flagShow":""
}
function App() {
  return (
    <div className="App">
          <span className="app-name">{name}</span>
          <h1 style={{color:'red'}}>{isFlag()}</h1>
          <ul>
            {course.map(course =><li key={course.id}>{course.name}</li>)}
          </ul>
    </div>
  )
}

export default App

三.函数组件

1.首字母必须大写

function Gz(){
  return (
    <>
    <div>GZ</div>
    <hr />
    <h1>nice!</h1>
    </>

  )
}
function App() {
  return (
    <div className="App">
          <span className="app-name">{name}</span>
          <h1 style={{color:'red'}}>{isFlag()}</h1>
          <ul>
            {course.map(course =><li key={course.id}>{course.name}</li>)}
          </ul>
          <Gz></Gz>
          <Gz></Gz>
    </div>
  )
}

2.事件绑定

on+事件名称={事件处理程序}

function Gz(){
  const handleClick=()=>{
    console.log("GZ点击");
  }
  return (
    <>
    <div onClick={handleClick}>GZ</div>
    <hr />
    <h1>nice!</h1>
    </>

  )
}

1.事件对象e 实例：阻止冒泡

function Gz(){
  const handleClick=(e)=>{
    e.preventDefault();
    console.log("GZ点击",e);
  }
  return (
    <>
    <div onClick={handleClick}>GZ</div>
    <hr />
    <h1>nice!</h1>
    <a onClick={handleClick} href="http://www.baidu.com">百度</a>
    </>

  )
}

2.传递自定义参数

function Gz(){
  const handleClick=(e,msg)=>{
    e.preventDefault();
    console.log("GZ点击",e,msg);
  }
  return (
    <>
    <div onClick={handleClick}>GZ</div>
    <hr />
    <h1>nice!</h1>
    <a onClick={(e)=>handleClick(e,"haha")} href="http://www.baidu.com">百度</a>
    </>
  )
}

组件状态

1.useState

const [age,setAge]=useState("耿智")

使用规则

1. 可执行多次，每次执行互相独立。
2. 只能出现在函数式组件中
3. 不能嵌套在if/for其它函数中
4. 函数作为参数

function Gz(props){
  const [ctitle,changeCtitle]=useState(()=>{
    return props.ctitle;
  })
  return (
    <>
      <div onClick={handleClick}>GZ----{ctitle}</div>
    </>
  )
}

function App() {
  return (
    <div className="App">
          <Gz ctitle="mini title"></Gz>
    </div>
  )
}

2.useEffect

副作用

• 函数除了主作用外，其它的作用就是副作用。react的主作用就是根据数据渲染ui，除此之外都是副作用（手动修改dom，ajax，localStorage）
• 使用
• 依赖项控制副作用的执行时机
• 清除副作用
• 组件被销毁时，有些副作用操作需要被清理，如定时器

useEffect(() => {
     let timer = setInterval(() => {
       console.log("timer")
     }, 1000)
    return () => {
       clearInterval(timer)
    }

• 发送网络请求(不能直接在useEffect的回调函数外层直接包裹await，会导致清理函数无法立即返回)

  useEffect(() => {
   
    async function loadData() {
     letdata= await fetch("hrttp://baidu.com");
    }
    loadData()
  }, [])

• 组件初始化执行一次，等到每次数据修改组件更新再次执行
• 添加[]会使组件初始化执行一次
• 依赖的特定项发生变化会再次执行
• useEffecth回调函数中用到的数据状态应该在依赖项中声明，不然会有bug

3. useRef

获取dom

import { useRef } from 'react'
const h1Ref = useRef(null);
<h1 ref={h1Ref}>{y}</h1>

自定义hook

import { useState } from "react";
export function windowScrollTop() {
  const [y, setY] = useState(0);
  window.addEventListener("scroll", () => {
    const top = document.documentElement.scrollTop;
    console.log(top);
    setY(top);
  })
  return [y]
}

---

const [y]=windowScrollTop()