【React】React 基础

1. 搭建环境

复制代码
npx create-react-app react-basic-demo

2. 基本使用

JSX 中使用 {} 识别 JavaScript 中的表达式,比如变量、函数调用、方法调用等。

if、switch、变量声明等属于语句,不是表达式。

列表渲染使用 map 。

事件绑定用;on + 事件名称 = { 事件处理函数/程序 }

小驼峰命名法

事件回调函数中可传形参 e 是该事件。

传递自定义参数时,事件绑定的位置改为箭头函数的写法。

3. 组件

React 中,一个组件就是一个首字母大写的函数。

4. useState

useState 向组件中添加状态变量

状态是只读的,不可以直接修改

对于对象类型的状态变量,应该传递一个新的对象来更改

5. 修改样式

可以使用 classnames 这个库方便进行 动态控制 class 类名

6. 获取 DOM

7. 组件通信

8. useEffect

useEffect 在组件中创建由渲染本身引起的操作(如发送 Ajax 请求,更改 DOM 等),即非用户操作。

复制代码
useEffect(() => {}, [])

副作用函数随着依赖项的触发而执行。

清理副作用一般在组件卸载时执行

复制代码
useEffect(() =>{
  // 实现副作用逻辑
  return ()=> {
  // 清除副作用逻辑
  }
}, [] )

9. React Hooks

相关推荐
Profile排查笔记16 分钟前
指纹浏览器环境异常排查:Fingerprint、Profile、Proxy、Session 和 Task Log 怎么看
前端·人工智能·后端·自动化
京韵养生记19 分钟前
【无标题】
java·服务器·前端
大气的小蜜蜂1 小时前
领域层的服务
java·前端·数据库
星栈1 小时前
LiveView 的 LiveComponent:比 React 组件更轻,但我一开始真的把它用错了
前端·前端框架·elixir
林希_Rachel_傻希希1 小时前
web性能优化之延迟加载图片和<inframe>
前端·javascript·面试
maxmaxma1 小时前
Konva 从入门到实践 - day1
前端
火星校尉1 小时前
一场数据基建与消费场景的跨界实验
java·前端·数据库·python·php
W是笔名2 小时前
python_let`s try it 6___BMI计算器
java·前端·python
risc1234562 小时前
Lucene80DocValuesConsumer 五种类型源码阅读顺序
java·服务器·前端
小米渣的逆袭2 小时前
Chrome Extension Script World(ISOLATED / MAIN)原理与适用场景
前端·javascript·chrome