hoooooks 从入门到放弃

原创于 2020-05-26 09:21:02 发布 · 142 阅读

0 ·

CC 4.0 BY-SA版权

本文详细探讨了React中的useState钩子，从基本用法到高级应用场景。通过实例解析，帮助读者从入门逐步掌握useState的使用技巧，提升React组件状态管理能力。

useState

import React,{useState} from 'react';
import { connect } from 'dva';

function IndexPage() {
  const [count,setCount] = useState(0)
  const [obj,setObj] = useState({name:"zhangsan"})
  const [arr,setArr] = useState([1,2,3])
  const [fnc,setFnc] = useState(()=>{
    return
  })
  return (
    <div >
      //字符串类型
      <h2>{count}</h2>
      //直接在第二个参数中进行处理
      <button onClick={()=>{setCount(count+1)}}>+</button>
		
	  //对象类型
      <h2>{obj.name}</h2>
 	  //set里的值 对象地址不能相同 
 	  //{...obj,name:"name"} Object.assin({...obj},{name:"namme"})
      <button onClick={()=>{setObj({...obj,name:123})}}>点击</button>

      <h2 style={ {fontSize:'30px'}}>{arr}</h2>
      <button onClick={()=>{setArr(()=>{ 
        arr.push(2)
        return [...arr]
      })}}>点击</button>

      <h2>{fnc}</h2>
    </div>
  );
}

export default connect()(IndexPage);