【React】React 基础

谢尔登2023-11-21 17:09

复制代码

npx create-react-app react-basic-demo

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

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

列表渲染使用 map 。

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

小驼峰命名法

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

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

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

useState 向组件中添加状态变量

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

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

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

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

复制代码

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

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

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

复制代码

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