React 学习笔记(基础篇)
时间:2022-07-25
本文章向大家介绍React 学习笔记(基础篇),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
前言
以下是 React 学习的一些笔记,基本来源于 React 中文文档[1] ,刚开始学习 React,都比较基础,不喜勿碰!
JSX
- JSX 中插入 name 的变量,将变量包裹在大括号中,也可以在大括号中使用任何有效的 JavaScript 表达式
- JSX 也是一个表达式,在编译之后,JSX 表达式会被转换成 js 函数调用,并且对其取值后得到的 JavaScript 对象 这就意味着我可以在 if 语句和 for 循环语句中使用 JSX,将 JSX 赋值给一个变量,将 JSX 作为参数,以及函数返回等等
- JSX 指定属性的时候,不要在 JavaScript 表达式的大括号外面再加上引号。引号(对于字符串)或者大括号(对于表达式)应该取其中的一个,对同一个属性不能同时使用两个
const element = <img src="{user.avatarUrl}"></img>; // 错误
const element = <img src={user.avatarUrl}></img>; // 正确
- 因为 JSX 的语法更接近 JavaScript 而不是 HTML,所以 React DOM 使用 camelCase(小驼峰命名)来定义属性的名称,而不是使用 HTML 属性名称的命名约定 所以 JSX 中的 class 变成了 className
元素渲染
- 与浏览器的 DOM 元素不同,React 元素是创建开销极小的普通对象。通过 React DOM 保持 DOM 和 React 元素一致 (这是怎么做到的呢?)
- 想要将一个 React 元素渲染到根 DOM 节点中,只需要将它们一起传入 ReactDOM.render()
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
- React 元素是不可变元素,一旦被创建,就无法更改它的子元素或者属性。更新 UI 唯一的方式就是创建一个全新的元素,并将其传入 ReactDOM.render()。(这不是很耗性能?)
- 但是 React DOM 会将元素和它的子元素与它之前的状态进行比较,并只会进行必要的更新来将 DOM 达到预期的结果。(这就解释了上面的耗性能的问题,这里的原理类似于 Vue 的 虚拟 DOM 的更新策略?)
组件 & Props
- 组件的概念,类似于 JavaScript 函数。接受任意的入参(props),并返回用于描述页面展示内容的 React 元素。看以下两个例子,它们在 React 中是等效的
// 函数方式
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
// ES6 的 class
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
- 当 React 元素为用户自定义组件的时候,会将 JSX 中所接收的属性转换成单个对象传递给组件,这个对象被称之为 props
// 自定义组件,注意这里的 props,就是传入的属性对象集合
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
- 提取组件可能是一件繁重的工作,但是在大型应用中,构建可复用的组件库是完全值得的
- 所有的 React 组件都必须像纯函数一样保护它们的 props 不被更改
- 在具有许多组件的应用程序中,当组件被销毁时候释放所占用的资源是非常重要的。
- componentDidMount() 方法会在组件已经被渲染到 DOM 中后运行
- React 可以知道 state 已经改变了,然后重新调用 setState() 方法进行一次 render() 方法更新页面
- 解决 state 是异步更新的问题,让setState() 接收一个函数而不是一个对象,这个函数将上一个 state 作为第一个参数,将此次的更新被应用时的 props 作为第二个参数
// Correct
this.setState((state, props) => ({
counter: state.counter + props.increment
}));
事件处理
- React 元素的事件处理和 DOM 元素的很相似,但是有一点语法上的不同。
- React 事件命名采用小驼峰
- 使用 JSX 语法传入一个函数作为事件处理器,而不是一个字符串
<button onclick="activateLasers()">
Activate Lasers
</button>
<button onClick={activateLasers}>
Activate Lasers
</button>
- 向事件处理程序传递参数
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
条件渲染
- 条件渲染和 JavaScript 中的一样,使用 if 或者 条件运算符去创建元素来表现当前的状态,然后让 React 根据它们来更新 UI
- 通过元素变量来储存元素,可以进一步有条件的渲染组件的一部分,而其他部分渲染并不会因此改变
- 在极少数情况下,可能需要隐藏组件,要完成这个操作,可以让 render 方法直接返回 null,而不进行任何渲染
列表 & key
- 渲染多个组件:通过使用 {} 在 JSX 内构建一个元素集合
- 关于 key 值的设置 当列表项目的顺序可能会变化的时候,我们不建议使用索引当做 key 值,这样会导致性能变差,还可能会引起组件状态的问题
状态提升
- 在 React 应用中,任何可变数据应当只有一个对应的唯一“数据源”。如果有多个组件依赖于同一个 state,那么我们应该将它提升到这些组件的最近共同父组件中。这样依赖于自上而下的数据流,而不是尝试在不同的组件之间同步 state
欢迎大家来我杂货铺逛逛,不买账都行,我们就聊聊天,谈谈心~
欢迎大家关注我的前端大杂货铺
参考资料
[1]
React 中文文档: https://zh-hans.reactjs.org/docs/getting-started.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Nginx解决跨域资源问题:No 'Access-Control-Allow-Origin' header is present on the requested resource.
- Typecho 仿简书主题 时间轴归档页实现
- Typecho如何添加“编辑”当前文章按钮
- Flutter入门第二讲:项目运行,Hello world
- Flutter入门第一讲:环境搭建(mac os为例)
- 第12天:NLP补充——HMM(隐马尔科夫模型)
- android View事件分发实测
- LeetCode51|寻找旋转排序数组中的最小值
- Yapi 可视化接口平台安装实践
- LeetCode50|搜索旋转排序数组II
- LeetCode49|搜索旋转排序数组
- 第13天:NLP补充——RNN算法
- Android自定义跑马灯效果(适合任意布局)
- Handler Looper.prepareMainLooper();源码分析
- Caused by: java.lang.IllegalStateException: System services not available to Activities before onCre