React学习——快速上手

文章目录

  • 初步
  • 模块思维

初步

https://php.cn/faq/400956.html

1、可以手动使用npm来安装各种插件,来从头到尾自己搭建环境。
如:

npm install react react-dom --save
npm install babel babel-loader babel-core babel-preset-es2015 babel-preset-react --save
npm install babel webpack webpack-dev-server -g

2、脚手架
在这里插入图片描述

create-react-app

npm install -g create-react-app
create-react-app my-app
cd my-app/
npm start

模块思维

https://react.dev/learn/tutorial-tic-tac-toe

官方文档的井字游戏案例

import { useState } from 'react';

function Square({ value, onSquareClick }) {
  return (
    <button className="square" onClick={onSquareClick}>
      {value}
    </button>
  );
}

function Board({ xIsNext, squares, onPlay }) {
  function handleClick(i) {
    if (calculateWinner(squares) || squares[i]) {
      return;
    }
    const nextSquares = squares.slice();
    if (xIsNext) {
      nextSquares[i] = 'X';
    } else {
      nextSquares[i] = 'O';
    }
    onPlay(nextSquares);
  }

  const winner = calculateWinner(squares);
  let status;
  if (winner) {
    status = 'Winner: ' + winner;
  } else {
    status = 'Next player: ' + (xIsNext ? 'X' : 'O');
  }

  return (
    <>
      <div className="status">{status}</div>
      <div className="board-row">
        <Square value={squares[0]} onSquareClick={() => handleClick(0)} />
        <Square value={squares[1]} onSquareClick={() => handleClick(1)} />
        <Square value={squares[2]} onSquareClick={() => handleClick(2)} />
      </div>
      <div className="board-row">
        <Square value={squares[3]} onSquareClick={() => handleClick(3)} />
        <Square value={squares[4]} onSquareClick={() => handleClick(4)} />
        <Square value={squares[5]} onSquareClick={() => handleClick(5)} />
      </div>
      <div className="board-row">
        <Square value={squares[6]} onSquareClick={() => handleClick(6)} />
        <Square value={squares[7]} onSquareClick={() => handleClick(7)} />
        <Square value={squares[8]} onSquareClick={() => handleClick(8)} />
      </div>
    </>
  );
}

export default function Game() {
  const [history, setHistory] = useState([Array(9).fill(null)]);
  const [currentMove, setCurrentMove] = useState(0);
  const xIsNext = currentMove % 2 === 0;
  const currentSquares = history[currentMove];

  function handlePlay(nextSquares) {
    const nextHistory = [...history.slice(0, currentMove + 1), nextSquares];
    setHistory(nextHistory);
    setCurrentMove(nextHistory.length - 1);
  }

  function jumpTo(nextMove) {
    setCurrentMove(nextMove);
  }

  const moves = history.map((squares, move) => {
    let description;
    if (move > 0) {
      description = 'Go to move #' + move;
    } else {
      description = 'Go to game start';
    }
    return (
      <li key={move}>
        <button onClick={() => jumpTo(move)}>{description}</button>
      </li>
    );
  });

  return (
    <div className="game">
      <div className="game-board">
        <Board xIsNext={xIsNext} squares={currentSquares} onPlay={handlePlay} />
      </div>
      <div className="game-info">
        <ol>{moves}</ol>
      </div>
    </div>
  );
}

function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}

1、分解组件
在这里插入图片描述在这里插入图片描述2、构建静态版本

可以“自上而下”地构建组件,从层次结构中较高的组件开始构建,也可以“自下而上”地从较低的组件开始构建。在更简单的例子中,自上而下通常更容易,而在较大的项目中,自下而上更容易。

特点:单向数据流,数据从顶级组件向向树底部的组件。

3、查找 UI 状态的最小但完整的表示形式

找出应用程序所需状态的绝对最小表示形式,并按需计算其他所有内容。

哪些是状态?

会随着时间的推移保持不变吗?如果是,则不是状态。
是通过 props 从父级传入的吗?如果是,则不是状态。
能根据组件中的现有状态或道具来计算它吗?如果是,那绝对不是状态!

4、确定state的位置

确定应用的最小状态数据后,需要确定哪个组件负责更改此状态,或者哪个组件拥有该状态。

React 使用**单向数据流,**将数据从父组件向下传递到子组件。

对于应用程序的每个状态:

1、确定根据该状态呈现某些内容的每个组件
2、查找最接近的公共父组件
3、决定state在哪

1、通常可以放入公共父级中
2、公共父级上方的某个组件中
3、如果找不到适合拥有状态的组件,创建一个仅用于保存状态的新组件,并将其添加到公共父组件上方的层次结构中的某个位置

5、添加反向数据流

添加父组件到子组件的方法,在父组件更新数据

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/403595.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

从MATLAB到MWORKS,科学计算与系统建模仿真平台的中国选项

“中国需要自主的科学计算与系统建模仿真平台。” 工业软件是所有复杂系统研发设计、仿真验证和数字制造的必备工具&#xff0c;已经成为衡量一个国家工业竞争力的核心指标。在传统工业软件领域&#xff0c;我们一直处于落后状态&#xff0c;尤其是研发设计类工业软件&#xff…

uniapp开发微信小程序跳转到另一个小程序中

注意&#xff1a;一开始我的云上务工模块是单独的tabbar界面&#xff0c;但是小程序跳转好像不能直接点击tabbar进行&#xff0c;所以我将这里改成了点击首页中的按钮进行跳转 点击这里进行小程序跳转 目录 基础讲解 uniapp小程序跳转的两个方法 调用说明&#xff08;半屏跳转…

助力国产BMS管理芯片品牌发展,世强硬创获迈巨微电子授权代理

作为电池的核心半导体器件&#xff0c;BMS电池管理芯片在电动化时代的需求持续旺盛&#xff0c;并迎来了快速迭代的时期。 为满足电动自行车、AGV等市场对BMS电池管理芯片的需求&#xff0c;世强先进&#xff08;深圳&#xff09;科技股份有限公司&#xff08;下称“世强先进”…

记阿里云mysql丢表丢数据的实践记录

第一时间挂工单&#xff0c;联系工程师指引&#xff0c;现在回过来想&#xff0c;第一时间要确认发生时间。 1.通过性能视图&#xff08;马后炮的总结&#xff0c;实际凭记忆恢复了三四次才找到数据&#xff09; 2.先恢复数据 通过Navicat工具&#xff0c;结构同步&#xff0…

动态绑定样式,uniapp,用三元运算动态绑定多个class类样式,动态绑定的样式可以和原始样式共存

介绍 | uni-app官网 vue、uniapp中动态添加绑定style、class 9种方法实现_vue style动态绑定-CSDN博客 uniapp使用三元运算符动态绑定元素的style样式_uniapp style动态绑定-CSDN博客 对象写法,可以写多个class类 class类的名字&#xff1a;判断条件&#xff0c;最后结果只有…

元宵佳节到,互动礼品,该怎么邮寄最便宜呢?

家人们&#xff0c;一年一度的元宵佳节就要到了&#xff0c;大家吃汤圆了没&#xff0c;朋友之间是不是可以相互寄送点礼物啊&#xff0c;但是该怎么邮寄呢&#xff1f;用什么方式寄快递最便宜呢&#xff1f;客官别着急&#xff0c;听我慢慢说给你听。 首先&#xff0c;先说说各…

NPS配置内网穿透-Windows,PVE

Windows和PVE的区别就是下载客户端的时候一个选windows-amd64(64位的电脑)另一个选 linux-amd64(64位电脑),386对应的是32位的电脑. Releases ehang-io/nps (github.com) PVE的安装参考的是以下视频安装.利用PVE虚拟机&#xff0c;来打造属于自己的All In One系统吧&#xf…

谷歌掀桌子!开源Gemma:可商用,性能超过Llama 2!

2月22日&#xff0c;谷歌在官网宣布&#xff0c;开源大语言模型Gemma。 Gemma与谷歌最新发布的Gemini 使用了同一架构&#xff0c;有20亿、70亿两种参数&#xff0c;每种参数都有预训练和指令调优两个版本。 根据谷歌公布的测试显示&#xff0c;在MMLU、BBH、GSM8K等主流测试…

大型语言模型的语义搜索(一):关键词搜索

关键词搜索(Keyword Search)是文本搜索种一种常用的技术&#xff0c;很多知名的应用app比如Spotify、YouTube 或 Google map等都会使用关键词搜索的算法来实现用户的搜索任务&#xff0c;关键词搜索是构建搜索系统最常用的方法&#xff0c;最常用的搜索算法是Okapi BM25&#x…

两种动态代理(可以看到代理类的样子,方便理解)

这里写目录标题 jdk动态代理例子CGlib动态代理例子手写spring中的事务部分自定义注解版aop实现方式 Spring的两大重点&#xff0c;IOC和AOP&#xff0c;今天我们就来学AOP&#xff0c;众所周知AOP的底层是动态代理&#xff0c;让我们看一下这两种动态代理的区别。 例子&#x…

软件压力测试:测试方法与步骤详解

随着软件应用的不断发展&#xff0c;用户对系统性能的要求也逐渐提高。在不同的负载条件下&#xff0c;系统必须能够保持稳定、高效的运行。软件压力测试是一种验证系统在各种负载情况下性能表现的关键手段。本文将详细探讨软件压力测试的方法和步骤。 1. 明确测试目标 在进行压…

数字化转型:八大关键词揭示企业增长新引擎

导语&#xff1a; 在数字化浪潮的席卷下&#xff0c;企业正面临前所未有的转型挑战与增长机遇。为了把握这一时代的脉搏&#xff0c;我们需要深入剖析数字化转型的核心要素。本文将通过“洞察不确定性、驾驭复杂系统、重塑竞争边界、数据驱动决策、智能软件崛起、技术架构重塑…

WooCommerce商品采集与发布插件

如何采集商品或产品信息&#xff0c;并自动发布到Wordpress系统的WooCommerce商品&#xff1f; 推荐使用简数采集器&#xff0c;操作简单方便&#xff0c;且无缝衔接WooCommerce插件&#xff0c;快速完成商品的采集与发布。 简数采集器的智能自动生成采集规则和可视化操作功能…

C 语言基本语法及实用案例分享

一、什么是 C 语言&#xff1f; C语言是一种较早的程序设计语言&#xff0c;诞生于1972年的贝尔实验室。1972 年&#xff0c;Dennis Ritchie 设计了C语言&#xff0c;它继承了B语言的许多思想&#xff0c;并加入了数据类型的概念及其他特性。C语言是一门面向过程的计算机编程语…

AI绘画与修图:重塑数字艺术的新纪元

文章目录 一、AI绘画与修图的原理二、AI绘画的应用三、AI修图的优势四、面临的挑战五、未来发展趋势《AI绘画与修图实战&#xff1a;PhotoshopFirefly从入门到精通 轻松玩转AI绘画与修图实战》亮点内容简介作者简介 随着人工智能技术的飞速发展&#xff0c;AI绘画与修图已经成为…

DTV的LCN功能介绍

文章目录 LCN简介LCN获取LCN Conflict LCN简介 Logical Channel Number&#xff08;LCN&#xff09;是数字电视系统中用于标识和组织频道的逻辑编号。LCN的目的是为了方便用户浏览和选择频道&#xff0c;使得数字电视接收设备能够根据这些逻辑编号对频道进行排序和显示。 LCN…

掌握CSS盒子模型:一站式指南

更多web开发知识欢迎访问我的专栏>>> 盒子模型 01-选择器 结构伪类选择器 基本使用 作用&#xff1a;根据元素的结构关系查找元素。 选择器说明E:first-child匹配父元素的第一个子元素EE:last-child匹配父元素的最后一个子元素EE:nth-child(n)匹配父元素的第n个…

043-WEB攻防-PHP应用SQL注入符号拼接请求方法HTTP头JSON编码类

043-WEB攻防-PHP应用&SQL注入&符号拼接&请求方法&HTTP头&JSON&编码类 #知识点&#xff1a; 1、PHP-MYSQL-SQL注入-数据请求类型 2、PHP-MYSQL-SQL注入-数据请求方法 3、PHP-MYSQL-SQL注入-数据请求格式 演示案例&#xff1a; ➢PHP-MYSQL-数据请求类型…

java替换jar中的class文件

1、编译好class文件2、找到需要修改class文件的路径3、解压需要替换的文件4、上传编译后的class文件5、重新压缩 在调整java代码过程中会遇到需要改jar包中的class文件的情况&#xff0c;改了如何替换呢&#xff1f; 1、编译好class文件 将需要修改的class文件代码复制到java编…

第四套CCF信息学奥赛c++ CSP-J认证初级组 中小学信奥赛入门组初赛考前模拟冲刺题(选择题)

第四套中小学信息学奥赛CSP-J考前冲刺题 1、在网络上,若某台电脑的设备及数据可由其他电脑共享,这台电脑称为 A、个人服务器 B、主机 C、副机 D、服务器 答案&#xff1a;D 考点分析&#xff1a;主要考查网络相关知识&#xff0c;网络上这样的电脑统称为服务器&#xff0…