React 应用程序是由 组件 组成的。一个组件是 UI(用户界面)的一部分,它拥有自己的逻辑和外观。组件可以小到一个按钮,也可以大到整个页面。
React
JSX
JSX 是 JavaScript 语法扩展,可以让你在 JavaScript 文件中书写类似 HTML 的标签。虽然还有其它方式可以编写组件,但大部分 React 开发者更喜欢 JSX 的简洁性,并且在大部分代码库中使用它。
JSX规则
只能返回一个根元素
如果想要在一个组件中包含多个元素,需要用一个父标签把它们包裹起来。例如:采用一个 标签- export default function Demo() {
- return (
-
- <h1>海蒂·拉玛的待办事项</h1>
- <img
- src="https://i.imgur.com/yXOvdOSs.jpg"
- alt="Hedy Lamarr"
- />
-
- )
- }
复制代码 如果你不想在标签中增加一个额外的 根元素,可以采用react的 Fragment或 将元素包裹起来。此时,渲染后的html不会有额外的 div标签
- import { Fragment } from 'react';export default function Demo() {
- return (
-
- <h1>海蒂·拉玛的待办事项</h1>
- <img
- src="https://i.imgur.com/yXOvdOSs.jpg"
- alt="Hedy Lamarr"
- />
-
- )
- }
复制代码- export default function Demo() {
- return (
-
- <h1>海蒂·拉玛的待办事项</h1>
- <img
- src="https://i.imgur.com/yXOvdOSs.jpg"
- alt="Hedy Lamarr"
- />
-
- )
- }
复制代码 为什么多个 JSX 标签需要被一个父元素包裹?
JSX 虽然看起来很像 HTML,但在底层其实被转化为了 JavaScript 对象,你不能在一个函数中返回多个对象,除非用一个数组把他们包装起来。这就是为什么多个 JSX 标签必须要用一个父元素或者 Fragment 来包裹。
标签必须闭合
JSX 要求标签必须正确闭合。像 <img> 这样的自闭合标签必须书写成 <img /> ,而像 oranges 这样只有开始标签的元素必须带有闭合标签,需要改为
oranges
。
使用驼峰式命名法给大部分属性命名
组件函数名必须使用大写
注意 profile的大小写。示例:
- function profile() {
- return (
- <img
- src="https://i.imgur.com/QIrZWGIs.jpg"
- alt="Alan L. Hart"
- />
- );
- }
- export default function Gallery() {
- return (
- <section>
- <h1>了不起的科学家</h1>
- <profile />
- <profile />
- <profile />
- </section>
- );
- }
复制代码- function Profile() {
- return (
- <img
- src="https://i.imgur.com/QIrZWGIs.jpg"
- alt="Alan L. Hart"
- />
- );
- }
- export default function Gallery() {
- return (
- <section>
- <h1>了不起的科学家</h1>
- <Profile />
- <Profile />
- <Profile />
- </section>
- );
- }
复制代码 尽量避免组件的嵌套
组件间的嵌套可能会导致组件结构臃肿,在渲染时,增加不必要的渲染,导致性能问题。如果要在组件间进行共享变量,可使用 props来进行组件间的调用
- export default function Gallery() {
- function Profile() {
- return (
- <img
- src="https://i.imgur.com/QIrZWGIs.jpg"
- alt="Alan L. Hart"
- />
- );
- }
- return (
- <section>
- <h1>了不起的科学家</h1>
- <Profile />
- <Profile />
- <Profile />
- </section>
- );
- }
复制代码- function Profile() {
- return (
- <img
- src="https://i.imgur.com/QIrZWGIs.jpg"
- alt="Alan L. Hart"
- />
- );
- }
- export default function Gallery() {
- return (
- <section>
- <h1>了不起的科学家</h1>
- <Profile />
- <Profile />
- <Profile />
- </section>
- );
- }
复制代码 React钩子
userDemo
useMemo 是一个 React Hook,它在每次重新渲染的时候能够缓存计算的结果。
- 跳过代价昂贵的重新计算
- 跳过组件的重新渲染
- 防止过于频繁地触发 Effect
- 记忆另一个 Hook 的依赖
- 记忆一个函数
- const cachedValue = useMemo(calculateValue, dependencies)
复制代码 参数
- calculateValue:要缓存的函数。它应该是一个没有任何参数的纯函数,并且可以返回任意类型。可以是一个react组件
- dependencies:要监控的值,如果值没有变化,则使用缓存的值作为返回值,否则更新缓存中的值。
用法
- [/code][size=5]React.Fragment 和 [/size]
- [indent] 其实是 React.Fragment 的语法糖,它们两个都可以用来对元素进行分组,渲染成 HTML 后不会增加额外的标签
- [/indent][indent]jsx语法编写必须要有一个根元素,类似于vue中的template的写法,再进行嵌套时,可能会出现额外增加dom节点,这样的弊端
- [list=1]
- [*]不符合html的dom规范
- [*]增加一些额外无意义的标签,增加html渲染的内容,影响性能
- [/list][/indent][size=4]问题示例[/size]
- [size=3]不使用ragment[/size]
- [code]import { Fragment } from 'react';
- function TableData () {
- return (
-
- <td>Eat</td>
- <td>Learn</td>
- <td>Code</td>
-
- );
- }
- export default function Table () {
- return (
- <table>
- <tbody>
- <tr>
- <TableData />
- </tr>
- </tbody>
- </table>
- );
- }
复制代码 上面的代码会渲染为:
渲染的结果就是在tr中增加了一个无意义的div节点。那 TableData方法可以把div去掉吗?显然是不行的。这是因为 jsx语法本身需要包含一个根元素,移除后,则不符合jsx的语法,编译会报错,无法渲染。
- <table>
- <tbody>
- <tr>
-
- <td>Eat</td>
- <td>Learn</td>
- <td>code</td>
-
- </tr>
- </tbody>
- </table>
复制代码 使用 React.Fragment语法
- import { Fragment } from 'react';
- function TableData () {
- return (
-
- <td>Eat</td>
- <td>Learn</td>
- <td>Code</td>
-
- );
- }
- export default function Table () {
- return (
- <table>
- <tbody>
- <tr>
- <TableData />
- </tr>
- </tbody>
- </table>
- );
- }
复制代码 上面的代码会渲染为:- <table>
- <tbody>
- <tr>
- <td>Eat</td>
- <td>Learn</td>
- <td>code</td>
- </tr>
- </tbody>
- </table>
复制代码 使用语法糖
- import { Fragment } from 'react';
- function TableData () {
- return (
-
- <td>Eat</td>
- <td>Learn</td>
- <td>Code</td>
-
- );
- }
- export default function Table () {
- return (
- <table>
- <tbody>
- <tr>
- <TableData />
- </tr>
- </tbody>
- </table>
- );
- }
复制代码 上述代码渲染为:- <table>
- <tbody>
- <tr>
- <td>Eat</td>
- <td>Learn</td>
- <td>code</td>
- </tr>
- </tbody>
- </table>
复制代码 React-Router
useSearchParams
- useSearchParams 钩子用于读取和修改当前位置 URL 中的查询字符串。可用来动态监听变量变化后,改变URL的参数
用法
- const [searchParams, setSearchParams] = useSearchParams({
- size: String(pageSize),
- });
复制代码
- 以地址:http://localhost:3004/tasks?size=1&page=2为例,可通过
来源:程序园用户自行投稿发布,如果侵权,请联系站长删除
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作! |