index.js为入口文件，App.js为根组件。
如何将react应用挂载在页面上？ 将App组件渲染到id为root的DOM元素中
JSX是|avaScript和XML(HTML)的缩写，表示在|S代码中编写HTML模版结构,它是React中编写UI模版的方式。
JSX并不是标准的S语法，它是JS的语法扩展，浏览器本身不能识别，需要通过解析工具(babel) 做解析之后才能在浏览器中运行。
左边是我们编写的代码，右边是在浏览器中运行的代码。
👻https://babeljs.io/ 这个网址中可以查看babel预览后的结果: 点击try it out --> 左侧勾选react
✨ babel的作用有哪些？【扩展】
Babel 是一个 JavaScript 编译器，主要用于将 ECMAScript 2015+（ES6+）的代码转换为向后兼容的 JavaScript，使其能够在较老的浏览器或 JavaScript 运行环境中运行。Babel 具备以下主要作用：
- 语法转换：将现代 JavaScript 语法（如箭头函数、模板字符串、解构赋值等）转换为 ES5 或更低版本的代码，确保兼容性。
- Polyfill 提供：Babel 可以引入新的 JavaScript API（例如 Promise、Set 等）的 polyfill，从而在不支持这些 API 的环境中正常运行。（Polyfill 是一种代码或插件，用于在旧版本浏览器或不支持某些新功能的环境中“填补”缺失的功能。）
- 插件扩展：Babel 拥有丰富的插件系统，支持根据需要定制转换规则，如支持 TypeScript、React JSX 语法转换等。
- 代码优化：一些 Babel 插件可以帮助优化代码结构和性能，例如 Tree Shaking 以删除无用代码。
- 跨平台兼容：通过预设和插件的配置，Babel 可以根据不同的目标环境（如不同版本的浏览器或 Node.js）生成适用的代码。
- 工具集成：Babel 支持与许多前端构建工具集成，如 Webpack、Rollup，使得编译、打包和构建过程更加流畅。
- 只能返回一个根元素 (可以用或包裹)
👻<></>内不能添加 key，可以使用内置组件 Fragment - 标签必须闭合
- 大部分属性命名使用驼峰式命名法
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状态。
✨ react调式工具的使用：
👻React 开发者工具
安装 React Developer Tools
在 Chrome、Firefox 等浏览器的扩展商店中搜索 “React Developer Tools” 并安装。
安装后，浏览器开发者工具（通常按 F12 或 Ctrl + Shift + I 打开）中会出现新的 “⚛️ React” 选项卡。
所以应该在生产环境下使用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函数可以用来实现逻辑的封装和复用
- 声明一个以use打头的函数
- 在函数体内封装可复用的逻辑(只要是可复用的逻辑)
- 把组件中用到的状态或者回调return出去(以对象或者数组)
- 在哪个组件中要用到这个逻辑，就执行这个函数，解构出来状态和回调进行使用
✨ ReactHooks使用规则：
- 只能在组件中或者其他自定义Hook函数中调用，不可以在外层调用
- 只能在组件的顶层调用，不能嵌套在if、for、其他函数中
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/yd-react-native/25951.html