【react】基础知识点学习

JSX是|avaScript和XML(HTML)的缩写，表示在|S代码中编写HTML模版结构,它是React中编写UI模版的方式。
JSX并不是标准的S语法，它是JS的语法扩展，浏览器本身不能识别，需要通过解析工具(babel) 做解析之后才能在浏览器中运行。

✨ babel的作用有哪些？【扩展】
Babel 是一个 JavaScript 编译器，主要用于将 ECMAScript 2015+（ES6+）的代码转换为向后兼容的 JavaScript，使其能够在较老的浏览器或 JavaScript 运行环境中运行。Babel 具备以下主要作用：

1. 语法转换：将现代 JavaScript 语法（如箭头函数、模板字符串、解构赋值等）转换为 ES5 或更低版本的代码，确保兼容性。
2. Polyfill 提供：Babel 可以引入新的 JavaScript API（例如 Promise、Set 等）的 polyfill，从而在不支持这些 API 的环境中正常运行。（Polyfill 是一种代码或插件，用于在旧版本浏览器或不支持某些新功能的环境中“填补”缺失的功能。）
3. 插件扩展：Babel 拥有丰富的插件系统，支持根据需要定制转换规则，如支持 TypeScript、React JSX 语法转换等。
4. 代码优化：一些 Babel 插件可以帮助优化代码结构和性能，例如 Tree Shaking 以删除无用代码。
5. 跨平台兼容：通过预设和插件的配置，Babel 可以根据不同的目标环境（如不同版本的浏览器或 Node.js）生成适用的代码。
6. 工具集成：Babel 支持与许多前端构建工具集成，如 Webpack、Rollup，使得编译、打包和构建过程更加流畅。

1. 只能返回一个根元素 (可以用或包裹)
   👻<></>内不能添加 key，可以使用内置组件 Fragment
2. 标签必须闭合
3. 大部分属性命名使用驼峰式命名法

1. 基础用法

2. 列表渲染

使用map进行遍历

✨key 需要满足的条件 【扩展】

• key 值在兄弟节点之间必须是唯一的 (同级节点中) ，但不用要求全局唯一，在不同的数组中可以使用相同的 key。
• key 值不能改变，否则就失去了使用 key 的意义！所以千万不要在渲染时动态地生成 key。
  注意：组件不会把 key 当作 props 的一部分。Key 的存在只对 React 本身起到提示，实际元素上并不会被渲染。
  注意：不要使用 index 作为 key，除非列表是静态的或者元素不会发生变化。因为 index 是可变的，删除、添加元素时可能导致 React 错误匹配和重渲染问题。

3. 条件渲染

逻辑与 &&: 前面值为true时，后面内容才会被渲染
三元运算: 用于两种情况的不同显示

注意： && 表达式 的左侧为 true 时，它则返回其右侧的值。但条件的结果是 false，则整个表达式会变成 false。在 JSX 里，React 会将 false 视为一个“空值”，不会进行任何渲染。但是在 vue中false会显示在页面上！

复杂条件渲染： 根据不同条件进行渲染

绑定事件：使用， 传入函数引用

自定义传参：

✨注意：不能直接写函数调用，这里事件绑定需要一个函数引用。 如果写的是函数调用，会在页面渲染时就会被立即触发！！

同时传递事件对象和自定义参数: 事件对象放在最后

是一个 React Hook(函数)，它允许我们向组件添加一个状态变量，从而控制影响组件的渲染结果。
也就是当数据发生变化时，页面也会跟着变化。（数据驱动视图）

1.useState是一个函数，返回值是一个数组
2.数组中的第一个参数是状态变量，第二个参数是set函数用来修改状态变量(直接传递新状态，也可以传递一个根据先前状态来计算新状态的函数)
3.usestate中传入初始值

如果直接更改值，ui界面不会重新更新，所以更改值要通过setXXX()来进行更新。

注意：如果 state 变量是一个对象时，不能只更新其中的一个字段，这样会直接替换原来的对象，导致其他属性丢失，如下错误写法：

👻react-useState介绍
注意： 调用 set 函数 不会 改变已经执行的代码中当前的 state，它只影响 下一次 渲染中 useState 返回的内容。

行内样式也写到一个对象中：

条件渲染样式：

使用classnames 优化类名设置：

👻https://github.com/JedWatson/classnames

通过value绑定react状态，再在onChange事件中反向修改react状态。

使用useRef钩子函数引用DOM元素，获取时使用useRef 返回对象的current属性。

1.props可传递任意的数据类型：数字、字符串、布尔值、数组、对象、函数、JSX。
2.props是只读对象：子组件只能读取props中的数据，不能直接进行修改,父组件的数据只能由父组件修改。

传递单个值：

传递对象：

使用 进行插槽传值：

**子传父实现：**在子组件中调用父组件props传递过来的方法，将数据以参数方式传递过去。

注意：绑定事件处理函数时一定是函数的引用！！

同级组件通信： 使用状态提升，一个子组件中使用子传父方法，一个子组件中使用父传子方法将数据传递给另一个子组件。

跨层级组件通信：
1.使用方法创建一个上下文对象Ctx
2.在顶层组件(App)中通过 组件提供数据,以形式。
3.在最底层组件(B)中通过 钩子函数获取使用数据

useEffect是一个React Hook函数，用于在React组件中创建不是由事件引起而是由渲染本身引起的操作,比如发送AJAX请求，更改DOM，监听某一属性发生变化而进行其他操作等等。

● 与事件不同，Effect 是由渲染本身，而非特定交互引起的。
● 默认情况下，Effect 在每次渲染（包括初始渲染）后运行。
● 如果 React 的所有依赖项都与上次渲染时的值相同，则将跳过本次 Effect。
注意： 在 严格模式 下，React 在开发模式中，每个组件都会重复挂载一次。(所以这边控制台会输出2次)

清除副作用：useEffect 返回的这个回调函数，每次被卸载时会调用

自定义Hook是以 use 打头的函数，通过自定义Hook函数可以用来实现逻辑的封装和复用

1. 声明一个以use打头的函数
2. 在函数体内封装可复用的逻辑(只要是可复用的逻辑)
3. 把组件中用到的状态或者回调return出去(以对象或者数组)
4. 在哪个组件中要用到这个逻辑，就执行这个函数，解构出来状态和回调进行使用