【React】React 基础

1. 搭建环境

npx create-react-app react-basic-demo

2. 基本使用

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

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

列表渲染使用 map 。

【React】React 基础_第1张图片

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

小驼峰命名法

【React】React 基础_第2张图片
事件回调函数中可传形参 e 是该事件。

【React】React 基础_第3张图片
传递自定义参数时,事件绑定的位置改为箭头函数的写法。

【React】React 基础_第4张图片

【React】React 基础_第5张图片

3. 组件

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

【React】React 基础_第6张图片

4. useState

useState 向组件中添加状态变量

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

【React】React 基础_第7张图片
对于对象类型的状态变量,应该传递一个新的对象来更改

【React】React 基础_第8张图片

5. 修改样式

【React】React 基础_第9张图片

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

【React】React 基础_第10张图片

6. 获取 DOM

【React】React 基础_第11张图片

7. 组件通信

8. useEffect

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

useEffect(() => {}, [])

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

【React】React 基础_第12张图片
清理副作用一般在组件卸载时执行

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

9. React Hooks

你可能感兴趣的:(React,react.js,前端,前端框架)