ReactHooks_useState

import { useState } from "react";

import './App.css';

 

function App() {

  const [redBorder,setRedBorder] = useState(false);   //useState()中的false是redBorder的初始值

  const changeColor = ( ) => {

    setRedBorder(!redBorder);

/*

        当useState里是对象，要修改对象中的其中一项时

        const newUser = Object.assign({},user);

        newUser.name ='ads';

　　 setCounter({...user},name:'asd')  {...user}浅复制

*/

  }

 

  return (

    <div>

      <p className={`red ${redBorder?'':'blue'}`}>这是一个段落</p> //在用{}的时候外围使用 ` `包裹

      <button onClick={changeColor}>点我一下</button>

    </div>

  );

 

 

 

export default App; //唯一输出

———————————————————————————————————————————————————————————————————————

const A组件 = ( ) => {

  console.log("A组件渲染");

  const [num,setNum] = useState(0);

  const funA = ( ) => {

    console.log("点击");

    setNum(1);

  };

  return (<>

    <B组件/>

    <button onclick={funa}>{num}</button>

  </>

  );

};

这时运行顺序为：

  A组件渲染，B组件渲染

  点击第一次，0 -》 1 ，点击，A组件渲染，B组件渲染

  点击第二次，1 -》 1 ，点击，A组件渲染

  点击第三次，1 -》 1 ，点击