react文档阅读笔记

ops/2024/10/30 22:08:10/

文章目录

    • 一、基础入门
      • 1. 创建声明一个组件
      • 2. 使用组件
      • 3. JSX标签语法
      • 4. 给组件添加样式
      • 5.在JSX中使用JS代码
      • 6.在JS中使用JSX
      • 7.内联样式
      • 8.条件渲染
      • 9.列表渲染
      • 10.事件处理
      • 11.更新页面(状态记录)
      • 12.react的hook函数
      • 13.组件间的数据共享
    • 二、React哲学
      • 1.将UI拆解为组件层级结构
      • 2.使用React构建一个静态版本
      • 3.找出 UI 精简且完整的 state 表示
      • 4.验证 state 应该被放置在哪里
      • 5.添加反向数据流
    • 三、React 生产级框架
      • 1. [Next.js](https://nextjs.org/)

参考文献:
react中文官方文档
MND

一、基础入门

1. 创建声明一个组件

function MyButton() {return (<button>Content</button>);
}

2. 使用组件

如果在不同的页面,要先引入才能使用

export default function MyApp() {return (<div><h1>Hello!</h1><MyButton /></div>);
}

要点:
React组件必须以大写字母开头
HTML标签必须以小写字母开头

3. JSX标签语法

    <div><h1>Hello!</h1><MyButton /></div>

要点:
标签必须闭合
不能返回多个JSX,多个JSX必须由空标签<></>或者<div></div>包裹

HTML->JSX: 在线转换器

4. 给组件添加样式

<img classNmae="bgPic" />

样式文件

.bgPic {border-radius: 50%;
}

可以使用link标签将样式挂在文档上

5.在JSX中使用JS代码

使用中括号

const user = {name: '小巧',age: 18,gender: male,
}
return (<div><h1>{user.name}</h1><h2>{user.age}</h2><h2>{user.gender === 'male''男' : '女'}</h2></div>
);

6.在JS中使用JSX

使用大括号

return (<div>hello!</div>
);

7.内联样式

export default function Profile() {const user = {name: 'Hedy Lamarr',imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',imageSize: 90,};return (<><imgsrc={user.imageUrl}style={{width: user.imageSize,height: user.imageSize}}/></>);
}

8.条件渲染

// 方法1
if (条件1) {组件1
} else (组件2
)// 方法2
{条件1 ? 组件1 : 组件2}
{条件1 && 组件1}
{条件2 && 组件2}

9.列表渲染

列表

const list = [{name: 'bob', age: 18, gender: 'male'},{name: 'jack', age: 28, gender: 'male'},{name: 'lucy', age: 19, gender: 'female'},
];

渲染

  {list && list.map(stu => {return (<div><h1>stu.name</h1><h1>stu.age</h1><h1>stu.gender</h1></div>);})}

10.事件处理

在组件中声明事件处理函数

function MyButton() {const handleClick = () => {console.log('you clicked me');};return (<button onClick={handleClick}>Click me</button>);
}

11.更新页面(状态记录)

react中的useState函数

import { useState } from 'react';function MyButton() {const [cnt, setCnt] = useState(0);const hanleClick = () => {setCnt(cnt + 1);};return (<button onClick={handleClick}> has Clicked {cnt} times</button>);
}

useState中可以拿到两样东西,记录的状态值和用来改变该状态值的函数,命名按照[something, setSomething]的规范
state的变化会导致页面的更新

如果多次渲染MyButton组件,每一个MyButton组件中的state的是隔离的,他们拥有各自自己的state,不会相互影响。

12.react的hook函数

特点:

  • 以use开头的函数
  • react由内置hook函数(如useState),也可以自己编写hook函数
  • hook函数只能在组件(或者其他hook)的顶层调用
  • 如果想在一个条件或循环中使用 useState,请提取一个新的组件并在组件内部使用它。

13.组件间的数据共享

父传子

(通过“状态提升”实现组件之间共享数据,只适用于层数不深的情况)
// 父组件
export default function MyApp() {const [cnt, setCnt] = useState(0);const handleClick = () => {setCnt(cnt + 1);};return (<><MyButton count={cnt} onClick={handleClick} /><MyButton count={cnt} onClick={handleClick} /></>);
}// 子组件
function MyButton(props){const { count, onClick } = props;return (<button onClick={onClick}> has been Clicked {count} times</button>);
};

两个MyButton组件共享的是同一个count

二、React哲学

1.将UI拆解为组件层级结构

原则:

  • 程序设计:单一功能原理(一个组件理想情况下应仅做一件事情。随着功能的持续增加,应该被持续的分解为更小的子组件)

2.使用React构建一个静态版本

原则:

  • 组件自上而下
  • 静态页面不需要考虑交互,只需要考虑布局样式和数据的结构

静态版本构建组件之间的层级关系

3.找出 UI 精简且完整的 state 表示

写state的原则是:保持精简且完整(不重复原则);比如说用了一个state存下学生信息列表,那么就不需要在用另外一个state存学生信息列表的长度。因为这是冗余的。

state验证:其中哪些是 state 呢?标记出那些不是的:

  • 随着时间推移 保持不变?如此,便不是 state。
  • 通过 props 从父组件传递?如此,便不是 state。
  • 是否可以基于已存在于组件中的 state 或者 props 进行计算?如此,它肯定不是state!

4.验证 state 应该被放置在哪里

React 使用单向数据流,通过组件层级结构从父组件传递数据至子组件。要搞清楚哪个组件拥有哪个 state。

验证每一个基于特定 state 渲染的组件。
寻找它们最近并且共同的父组件——在层级结构中,一个凌驾于它们所有组件之上的组件。
决定 state 应该被放置于哪里:

  • 通常情况下,你可以直接放置 state 于它们共同的父组件。
  • 你也可以将 state 放置于它们父组件上层的组件。
  • 如果你找不到一个有意义拥有这个 state 的地方,单独创建一个新的组件去管理这个 state,并将它添加到它们父组件上层的某个地方。

5.添加反向数据流

用户输入-> 改变state

三、React 生产级框架

1. Next.js


http://www.ppmy.cn/ops/129709.html

相关文章

高级java每日一道面试题-2024年10月24日-JVM篇-说一下JVM有哪些垃圾回收器?

如果有遗漏,评论区告诉我进行补充 面试官: 说一下JVM有哪些垃圾回收器? 我回答: 1. Serial收集器 特点&#xff1a;Serial收集器是最古老、最稳定的收集器&#xff0c;它使用单个线程进行垃圾收集工作。在进行垃圾回收时&#xff0c;它会暂停所有用户线程&#xff0c;即St…

EasyExcel自定义下拉注解的三种实现方式

文章目录 一、简介二、关键组件1、ExcelSelected注解2、ExcelDynamicSelect接口&#xff08;仅用于方式二&#xff09;3、ExcelSelectedResolve类4、SelectedSheetWriteHandler类 三、实际应用总结 一、简介 在使用EasyExcel设置下拉数据时&#xff0c;每次都要创建一个SheetWr…

CSS复习2

CSS所有样式表都可以在CSS Reference查到。 一、利用阴影制作三角形 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"…

自动化立体仓库消防系统设计

导语 大家好&#xff0c;我是社长&#xff0c;老K。专注分享智能制造和智能仓储物流等内容。 新书《智能物流系统构成与技术实践》 完整版文件和更多学习资料&#xff0c;请球友到知识星球【智能仓储物流技术研习社】自行下载。 这份文件是关于自动化立体仓库消防系统设计的详细…

Spring Cache-基于注解的缓存

Spring Cache 是 Spring 提供的缓存抽象框架&#xff0c;能够将数据缓存到内存或外部缓存中&#xff0c;减少数据库或远程服务的访问频率&#xff0c;从而显著提升应用性能。Spring Cache 通过注解的方式实现缓存逻辑&#xff0c;使用方便&#xff0c;支持多种缓存实现&#xf…

MySQL-SQL性能分析

SQL执行频率 Mysql客户端连接成功后&#xff0c;通过 show [ session | global ] status 命令可以提供服务器状态信息。通过如下指令&#xff0c;可以查看当前数据库的 insert &#xff0c;update &#xff0c; delete&#xff0c;select 的访问频次。show global status like…

在vue项目中,如何写一个自定义指令

在 Vue.js 中&#xff0c;自定义指令&#xff08;Custom Directives&#xff09;是一种扩展 Vue 功能的方法&#xff0c;允许开发者创建自己的自定义绑定逻辑。自定义指令可以用来操作 DOM 元素&#xff0c;实现一些特殊的交互效果或者其他需求。 在 Vue 项目中&#xff0c;自…

1x1卷积核到底是什么

1x1卷积核其实是三维的&#xff0c;即1x1xn&#xff0c;其中n称为通道数。卷积核的每一维都会滑动窗口般在数据上相乘再加和为一个数&#xff0c;如2x2x4经过1x1x4卷积后变成了2x2x1&#xff0c;经过1x1x2后变成了2x2x3&#xff0c;从而实现了通道数的变化。