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 ,点击

ReactHooks_useState的更多相关文章

随机推荐

  1. 在回显时遇到的问题,回显的值无法显示到页面 vue

    //理解为 重新渲染 this.form的数据 1 this.form = Object.assign({}, this.form)

  2. Python使用pip安装第三方模块问题

    安装时总会出现错误:pip is configured with locations that require TLS/SSL, however the ssl module in Python is ...

  3. Twenty-six

    条件渲染指令 v-if:动态移除或创建元素(如果刚进入页面的时候,某些元素默认不需要被显示,而且后期这个元素很可能也不需要被展示出来) v-show: 添加或移除display:none的样式(频繁切 ...

  4. ES得分

    一.概念 1.ES主要用于搜索 2.搜索要把更有相关性的结果展示出来 3.对一个文档评分,相关性越大,评分越高 4.打分的本质是排序 二.评分规则 1.ES5之前,默认评分规则是TF-IDF,这是信息 ...

  5. C# DateTime转换为字符串

    12小时制:DateTime.Now.ToString("yyyy-MM-dd hh:mm:ss") 24小时制:DateTime.Now.ToString("yyyy- ...

  6. No.1.3

    CSS层叠样式表   /* css注释 */ CSS引入方式 内嵌式:CSS写在style标签中 提示:style标签虽然可以写在页面任意位置,但是通常约定写在 head 标签中(作用范围:当前页面: ...

  7. 洛谷P5356 [Ynoi2017] 由乃打扑克

    题目 https://www.luogu.com.cn/problem/P5356 思路 由乃题,那么考虑分块(大雾,但确实分块是正解). 题面很清晰,就是求动态的区间第k小,支持区间加法操作. 根据 ...

  8. mysql主从备份双机热备实现方法

    1.环境准备 主服务器(master):192.168.1.1 从服务器(slave):192.168.1.2 要求主从服务器mysql版本相同且大于3.23 2.主服务器 2.1创建同步用户 cre ...

  9. vue 中 watch 和 watchEffect 区别

    vue 中 watch 和 watchEffect 区别 * watch 需要先指明需要侦听的数据源,watchEffect 不需要,只要传入的函数带有依赖就会自动追踪. * watchEffect ...

  10. 腾讯云服务器,在本地域名不能访问,IP可以访问;端口访问差异:有的地方能访问有的不能

    本地域名不能访问原因是DNS地址问题,本地设置的DNS地址没法解析出腾讯云IP,所以域名访问不到,直接就用服务器IP却可以. 修改DNS可以在本地电脑上修改,只影响本机, 按下键盘上的"Wi ...