响应事件如需添加一个事件处理函数，你需要先定义一个函数，然后将其作为 prop 传入合适的 JSX 标签
1234567891011export default function Button() { function handleClick() { alert('你点击了我！'); } return ( <button onClick={handleClick}> 点我 </button> );}
事件处理函数：1、通常在你的组件内部定义。2、名称以 handle 开头，后跟事件名称。
也可以使用内联的事件处理函数或箭头函数。事件处理函数不需要是纯函数
1234567<button onClick={function handleClick() { alert('你点击了我！');}}><button onClick={() => { a ...
State：组件的记忆useState：保存数据并在更新数据时出发重新渲染
123456789101112131415161718import { useState } from 'react';export default function Gallery() { const [index, setIndex] = useState(0); function handleClick() { setIndex(index + 1); } let sculpture = sculptureList[index]; return ( <> <button onClick={handleClick}> Next </button> </> );}
state是隔离且私有的，state 完全私有于声明它的组件
React渲染步骤
触发渲染
导致组件渲染的原因：
组件的 初次渲染 ...
用state响应输入React使用声明式UI。将所有的交互变为 state 的改变
当开发一个组件时：
写出你的组件中所有的视图状态。
确定是什么触发了这些 state 的改变。
通过 useState 模块化内存中的 state。
删除任何不必要的 state 变量。
连接事件处理函数去设置 state。
构建state的原则
合并关联的state
如果某两个 state 变量总是一起变化，则将它们统一成一个 state 变量可能更好
避免矛盾的state
可以创建一个state变量来替代矛盾的state所表达的状态
避免冗余的state
如果你能在渲染期间从组件的 props 或其现有的 state 变量中计算出一些信息，则不应将这些信息放入该组件的 state 中
不要将props放入state中，只有当你想要忽略特定 props 属性的所有更新时，才应该放入
避免重复的state
重复的state难以保持同步
避免深度嵌套的state
深度嵌套的state难以更新，尽量使其扁平化
在组件间共享状态状态提升：将相关state放到它们的公共父级，再通过 p ...
1、在js目录中创建imgloaded.js文件
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941 ...
1、在js目录中创建footer-animal.js文件
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051function initFooterAnimal() { const footerBar = document.querySelector('#footer-bar'); if (!footerBar) return console.error('找不到指定元素'); const footerAnimal = document.createElement('div'); footerAnimal.id = 'footer-animal'; footerAnimal.innerHTML = ` <img class="animal entered loaded" ...
1、组件的导入和导出react组件有两种导出方式：默认导出和具名导出一个文件里有且仅有一个默认导出，但是可以有任意多个具名导出
1234567// 默认导入和导出export default function Button(){}import Button from './Button.js';// 具名导入和导出export function Button() {}import { Button } from './Button.js';
当使用默认导入时，你可以在 import 语句后面进行任意命名。比如 import Banana from './Button.js'
React组件是一段可以使用标签进行扩展的JavaScript函数
2、JSXJSX：将标签引入 JavaScript。JSX 是一种语法扩展规则：
只能返回一个根元素如果想要在一个组件中包含多个元素，使用<div></div>或<></>包裹起来
...
1、git操作创建SSH_KEY
1234567# 执行命令生成ssh-key：ssh-keygen -t rsa -C "<邮箱地址>"# 检查是否设置成功：ssh -T git@github.com# git添加用户名和邮箱git config --global user.email "<邮箱地址>"git config --global user.name "<Github名称>"
git连接远程仓库
12345678# 初始化仓库git init# 连接远程仓库git remote add <仓库名称> <仓库地址># 第一次提交，绑定分支git add .git commit -m "commit"git push -u <仓库名称> <分支名称>
git连接子模块
1git submodule add <子仓库地址> <子模块目录>
git克隆
1git clone <仓库地址 ...
