React 最新版本（hooks写法）

React 目录

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：

在我理解，每个框架都可以分为这六大类：指令，组件，属性，hooks，路由，全局存放数据。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、指令

jsx语法：

什么是jsx，jsx就是html和js结合

需要注意的是：react的类名class变成了 className，事件从onClick，因为class是react的内部关键字

动态数据

useState() 相当于Vue3的ref（），reactive（）

useState(). 基本数据类型。 对象数据。 数组数据。

在 hooks中操作的对象数据类型，不会合并原来的数据

import {
   useState} from "react"

function App() {
   


  let [age,setAge] = useState(10)

  const addAge = ()=> {
   
    setAge(age+1)
  }


// 复杂数据  =》 数组
  let [list,setList] = useState(['1','2'])

  const reduces = (index)=> {
   
    setList((state)=> {
   
      state.splice(index,1)
      return [...state]
    })
  }


  // 复杂数据 对象
  let [stateObj,setState] = useState({
   name:'虎',age:12})
  const changeAge = ()=> {
   
    setState((state)=> {
   
      return {
    // 返回的就是新的数据
        ...state,
        age: state.age+1
      }
    })
  }

  return(

    <div>
      <h1>{
   age}</h1>
      <button onClick={
   ()=>addAge()}></button>

      {
   
        list.map((item,index)=> {
   
          return <div key={
   index}>{
   item} .  <button onClick={
   ()=>reduces(index)}></button></div>
        })
      }


      <h2>{
   stateObj.name}</h2>
      <h2>{
   stateObj.age}</h2>

      <button onClick={
   ()=>changeAge()}>change</button>
    </div>
  )
  
}

export default App

条件渲染

//条件渲染

// 判断条件

// 写法1=》在模块中使用  {} 处理

// 写法2=》在组件的逻辑层中进行处理
function App(){
   
    let nums = 60



    //逻辑层

    function getNum(){
   
           if(nums>=60){
   
            return <div>及格</div>
           }else{
   
            return <div>不及格</div>
           }
    }
    return (
        <div>

            {
   /* 写法 1 用户   =》{} */}
            {
   nums>=60?<div>及格</div>:<div>不及格</div>}

            {
   getNum()}
        </div>
    )
}



export default App

列表渲染

//  列表循环  和添加key 

//写法  

//1写法1 在模块中通过  展示动态数据  {}  在这里写  map 

//2 写法2  在逻辑层已经处理好 循环 =》 通过  map

//3 需要同key => react  更新 识别元素的唯一标识=》底层diff

//注意 =》jsx 类名  =>className
function App(){
   
     let list = ['西瓜','桃子','葡萄']
      
     let lists = [1,2,3]
     
     //map 循环 =》 特点 =》 如果  有  return  返回我们需要 数据 =》创建创建一个数组
        // let arrs = lists.map(item=>{
   
        //        console.log(item);
        //        if(item>2){
   
        //         return item
        //        }
           
        // })
        // console.log(arrs);

        // key=> react  要走 diff 算法 =》根据这个key 来判断 是否是同一个元素

        // 写法2

       function getLists(){
   
        return  lists.map((item,index)=>{
   
                return (
                    <div key={
   index}>{
   item}</div>
                )
              } )
              
        }
    return (
        <div className="list">
             {
   /* 写法1 */}
           {
   
            list.map((item,index)=>{
     //item
                 
                return(
                    <div key={
   index}