找回密码
 立即注册
首页 业界区 业界 react学习

react学习

抑卞枯 5 天前
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. }
  9. export default function Gallery() {
  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. }
  9. export default function Gallery() {
  10.   return (
  11.     <section>
  12.       <h1>了不起的科学家</h1>
  13.       <Profile />
  14.       <Profile />
  15.       <Profile />
  16.     </section>
  17.   );
  18. }
复制代码
尽量避免组件的嵌套

组件间的嵌套可能会导致组件结构臃肿,在渲染时,增加不必要的渲染,导致性能问题。如果要在组件间进行共享变量,可使用 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. }
  9. export default function Gallery() {
  10.   return (
  11.     <section>
  12.       <h1>了不起的科学家</h1>
  13.       <Profile />
  14.       <Profile />
  15.       <Profile />
  16.     </section>
  17.   );
  18. }
复制代码
React钩子

userDemo

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


  • 跳过代价昂贵的重新计算
  • 跳过组件的重新渲染
  • 防止过于频繁地触发 Effect
  • 记忆另一个 Hook 的依赖
  • 记忆一个函数
  1. const cachedValue = useMemo(calculateValue, dependencies)
复制代码
参数


  • calculateValue:要缓存的函数。它应该是一个没有任何参数的纯函数,并且可以返回任意类型。可以是一个react组件
  • dependencies:要监控的值,如果值没有变化,则使用缓存的值作为返回值,否则更新缓存中的值。
用法
  1. [/code][size=5]React.Fragment 和 [/size]
  2. [indent] 其实是 React.Fragment 的语法糖,它们两个都可以用来对元素进行分组,渲染成 HTML 后不会增加额外的标签
  3. [/indent][indent]jsx语法编写必须要有一个根元素,类似于vue中的template的写法,再进行嵌套时,可能会出现额外增加dom节点,这样的弊端
  4. [list=1]
  5. [*]不符合html的dom规范
  6. [*]增加一些额外无意义的标签,增加html渲染的内容,影响性能
  7. [/list][/indent][size=4]问题示例[/size]
  8. [size=3]不使用ragment[/size]
  9. [code]import { Fragment } from 'react';
  10. function TableData () {
  11.   return  (
  12.    
  13.       <td>Eat</td>
  14.       <td>Learn</td>
  15.       <td>Code</td>
  16.    
  17.   );
  18. }
  19. export default function Table () {
  20.   return (
  21.     <table>
  22.       <tbody>
  23.         <tr>
  24.         <TableData />
  25.         </tr>
  26.       </tbody>
  27.     </table>
  28.   );
  29. }
复制代码
上面的代码会渲染为:
渲染的结果就是在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';
  2. function TableData () {
  3.   return  (
  4.    
  5.       <td>Eat</td>
  6.       <td>Learn</td>
  7.       <td>Code</td>
  8.    
  9.   );
  10. }
  11. export default function Table () {
  12.   return (
  13.     <table>
  14.       <tbody>
  15.         <tr>
  16.         <TableData />
  17.         </tr>
  18.       </tbody>
  19.     </table>
  20.   );
  21. }
复制代码
上面的代码会渲染为:
  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';
  2. function TableData () {
  3.   return  (
  4.    
  5.       <td>Eat</td>
  6.       <td>Learn</td>
  7.       <td>Code</td>
  8.    
  9.   );
  10. }
  11. export default function Table () {
  12.   return (
  13.     <table>
  14.       <tbody>
  15.         <tr>
  16.         <TableData />
  17.         </tr>
  18.       </tbody>
  19.     </table>
  20.   );
  21. }
复制代码
上述代码渲染为:
  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为例,可通过

来源:程序园用户自行投稿发布,如果侵权,请联系站长删除
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
您需要登录后才可以回帖 登录 | 立即注册