react学习

React 应用程序是由 组件 组成的。一个组件是 UI（用户界面）的一部分，它拥有自己的逻辑和外观。组件可以小到一个按钮，也可以大到整个页面。

React

JSX

JSX 是 JavaScript 语法扩展，可以让你在 JavaScript 文件中书写类似 HTML 的标签。虽然还有其它方式可以编写组件，但大部分 React 开发者更喜欢 JSX 的简洁性，并且在大部分代码库中使用它。

JSX规则

只能返回一个根元素

如果想要在一个组件中包含多个元素，需要用一个父标签把它们包裹起来。例如：采用一个 标签

1. export default function Demo() {
2.         return (
3.         
4.           <h1>海蒂·拉玛的待办事项</h1>
5.           <img
6.             src="https://i.imgur.com/yXOvdOSs.jpg"
7.             alt="Hedy Lamarr"
8.             />
9.                
10.         )
11. }

复制代码

如果你不想在标签中增加一个额外的 根元素，可以采用react的 Fragment或 将元素包裹起来。此时，渲染后的html不会有额外的 div标签

• Fragment
  

1. import { Fragment } from 'react';export default function Demo() {
2.         return (
3.         
4.           <h1>海蒂·拉玛的待办事项</h1>
5.           <img
6.             src="https://i.imgur.com/yXOvdOSs.jpg"
7.             alt="Hedy Lamarr"
8.             />
9.                
10.         )
11. }

复制代码

• 
  

1. export default function Demo() {
2.         return (
3.         
4.           <h1>海蒂·拉玛的待办事项</h1>
5.           <img
6.             src="https://i.imgur.com/yXOvdOSs.jpg"
7.             alt="Hedy Lamarr"
8.             />
9.                
10.         )
11. }

复制代码

为什么多个 JSX 标签需要被一个父元素包裹？

JSX 虽然看起来很像 HTML，但在底层其实被转化为了 JavaScript 对象，你不能在一个函数中返回多个对象，除非用一个数组把他们包装起来。这就是为什么多个 JSX 标签必须要用一个父元素或者 Fragment 来包裹。

标签必须闭合

JSX 要求标签必须正确闭合。像 <img> 这样的自闭合标签必须书写成

<img />

，而像 oranges 这样只有开始标签的元素必须带有闭合标签，需要改为
oranges
。
使用驼峰式命名法给大部分属性命名

组件函数名必须使用大写

注意 profile的大小写。示例：

• 错误写法
  

1. function profile() {
2.   return (
3.     <img
4.       src="https://i.imgur.com/QIrZWGIs.jpg"
5.       alt="Alan L. Hart"
6.     />
7.   );
8. }
10. export default function Gallery() {
11.   return (
12.     <section>
13.       <h1>了不起的科学家</h1>
14.       <profile />
15.       <profile />
16.       <profile />
17.     </section>
18.   );
19. }

复制代码

• 正确写法
  

1. function Profile() {
2.   return (
3.     <img
4.       src="https://i.imgur.com/QIrZWGIs.jpg"
5.       alt="Alan L. Hart"
6.     />
7.   );
8. }
10. export default function Gallery() {
11.   return (
12.     <section>
13.       <h1>了不起的科学家</h1>
14.       <Profile />
15.       <Profile />
16.       <Profile />
17.     </section>
18.   );
19. }

复制代码

尽量避免组件的嵌套

组件间的嵌套可能会导致组件结构臃肿，在渲染时，增加不必要的渲染，导致性能问题。如果要在组件间进行共享变量，可使用 props来进行组件间的调用

• 不规范写法
  

1. export default function Gallery() {
2.     function Profile() {
3.       return (
4.         <img
5.           src="https://i.imgur.com/QIrZWGIs.jpg"
6.           alt="Alan L. Hart"
7.         />
8.       );
9.     }
10.   return (
11.     <section>
12.       <h1>了不起的科学家</h1>
13.       <Profile />
14.       <Profile />
15.       <Profile />
16.     </section>
17.   );
18. }

复制代码

• 推荐写法
  

1. function Profile() {
2.   return (
3.     <img
4.       src="https://i.imgur.com/QIrZWGIs.jpg"
5.       alt="Alan L. Hart"
6.     />
7.   );
8. }
10. export default function Gallery() {
11.   return (
12.     <section>
13.       <h1>了不起的科学家</h1>
14.       <Profile />
15.       <Profile />
16.       <Profile />
17.     </section>
18.   );
19. }

复制代码

React钩子

userDemo

useMemo 是一个 React Hook，它在每次重新渲染的时候能够缓存计算的结果。

• 跳过代价昂贵的重新计算
  
• 跳过组件的重新渲染
  
• 防止过于频繁地触发 Effect
  
• 记忆另一个 Hook 的依赖
  
• 记忆一个函数
  

1. const cachedValue = useMemo(calculateValue, dependencies)

复制代码

参数

• calculateValue：要缓存的函数。它应该是一个没有任何参数的纯函数，并且可以返回任意类型。可以是一个react组件
  
• dependencies：要监控的值，如果值没有变化，则使用缓存的值作为返回值，否则更新缓存中的值。
  

用法

1. [/code][size=5]React.Fragment 和 [/size]
3. [indent] 其实是 React.Fragment 的语法糖，它们两个都可以用来对元素进行分组，渲染成 HTML 后不会增加额外的标签
4. [/indent][indent]jsx语法编写必须要有一个根元素，类似于vue中的template的写法，再进行嵌套时，可能会出现额外增加dom节点，这样的弊端
5. [list=1]
6. [*]不符合html的dom规范
7. [*]增加一些额外无意义的标签，增加html渲染的内容，影响性能
8. [/list][/indent][size=4]问题示例[/size]
10. [size=3]不使用ragment[/size]
12. [code]import { Fragment } from 'react';
14. function TableData () {
15.   return  (
16.    
17.       <td>Eat</td>
18.       <td>Learn</td>
19.       <td>Code</td>
20.    
21.   );
22. }
24. export default function Table () {
25.   return (
26.     <table>
27.       <tbody>
28.         <tr>
29.         <TableData />
30.         </tr>
31.       </tbody>
32.     </table>
33.   );
34. }

复制代码

上面的代码会渲染为：

渲染的结果就是在tr中增加了一个无意义的div节点。那 TableData方法可以把div去掉吗？显然是不行的。这是因为 jsx语法本身需要包含一个根元素，移除后，则不符合jsx的语法，编译会报错，无法渲染。

1. <table>
2.   <tbody>
3.     <tr>
4.       
5.         <td>Eat</td>
6.         <td>Learn</td>
7.         <td>code</td>
8.       
9.     </tr>
10.   </tbody>
11. </table>

复制代码

使用 React.Fragment语法

1. import { Fragment } from 'react';
3. function TableData () {
4.   return  (
5.    
6.       <td>Eat</td>
7.       <td>Learn</td>
8.       <td>Code</td>
9.    
10.   );
11. }
13. export default function Table () {
14.   return (
15.     <table>
16.       <tbody>
17.         <tr>
18.         <TableData />
19.         </tr>
20.       </tbody>
21.     </table>
22.   );
23. }

复制代码

上面的代码会渲染为：

1. <table>
2.   <tbody>
3.     <tr>
4.       <td>Eat</td>
5.       <td>Learn</td>
6.       <td>code</td>
7.     </tr>
8.   </tbody>
9. </table>

复制代码

使用语法糖

1. import { Fragment } from 'react';
3. function TableData () {
4.   return  (
5.    
6.       <td>Eat</td>
7.       <td>Learn</td>
8.       <td>Code</td>
9.    
10.   );
11. }
13. export default function Table () {
14.   return (
15.     <table>
16.       <tbody>
17.         <tr>
18.         <TableData />
19.         </tr>
20.       </tbody>
21.     </table>
22.   );
23. }

复制代码

上述代码渲染为：

1. <table>
2.   <tbody>
3.     <tr>
4.       <td>Eat</td>
5.       <td>Learn</td>
6.       <td>code</td>
7.     </tr>
8.   </tbody>
9. </table>

复制代码

React-Router

useSearchParams

• useSearchParams 钩子用于读取和修改当前位置 URL 中的查询字符串。可用来动态监听变量变化后，改变URL的参数
  

用法

1.   const [searchParams, setSearchParams] = useSearchParams({
2.     size: String(pageSize),
3.   });

复制代码

• 以地址：http://localhost:3004/tasks?size=1&page=2为例，可通过
  

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！