react学习心得

原创已于 2023-09-01 17:55:41 修改 · 128 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #react.js #前端

于 2023-08-29 23:05:55 首次发布

8.29 配置环境与安装依赖

npx create-react-app XXXX 时报错：与package.json发生冲突解决方法：

删去create a new react 的文件夹，如 C:\Windows\System32\react_study，重新输入npx create-react-app react_study

关闭conda后powershell仍为虚拟环境中：

执行conda config --set auto_activate_base False

React18，需要去掉严格模式节点，否则会影响useEffect的执行时机：

src中的.js文件中，删去<React.StrictMode></React.StrictMode>

8.30

jsx基础语法：

列表渲染：列表名.map(item=> <li key={item.id}>{item.name})</li>

条件渲染：三元表达式（常），逻辑&&运算, 函数分支逻辑 --> 动态类名控制

样式控制：行内样式-在元素身上绑定一个style属性，类名样式（常）-在元素身上绑定一个className属性

jsx注意：一个根节点，可用幽灵节点<>; 属性名采取小驼峰命名法; 支持多行，换行用（）包裹

列表渲染使用map方法时，内部函数参数、要么全部是item，要么全部是数组名：

{songs.map((songs) => <li>{songs.name}</li>}  //正确
{songs.map((item) => <li>{item.name}</li>}   //正确
{songs.map((songs) => <li>{item.name}</li>}   //错误
{songs.map((item) => <li>{songs.name}</li>}   //错误

8.31

传递给事件处理函数的函数应直接传递，不能调用：

<button onClick={handleClick}> <button onClick={handleClick()}>

<button onClick={() => alert('...')}> <button onClick={alert('...')}>

报错-渲染的 hooks 比预期的少：

hook——use 开头的函数，只能在组件或自定义 Hook 的最顶层调用，定义const

[sth,setSth]=useState(null))在组件函数的内部代码块中会报错

9.1

更新state中的对象-对象展开语法；Immer

//对象展开语法 ...
setPerson({
    ...person,
    work:{
        ...person.artwork,
        city: 'Guangzhou'
    }
})


//使用immer
//需要npm install use-immer添加immer依赖
import {useImmer} from 'use-immer'

const [person, updatePerson] = useImmer({
    ...
})

function handleNameChange(e){
    updatePerson(draft => {
        draft.name = e.target.value;
    })
}

更新state中的数组

添加：使用数组展开语法

删除：filter方法

转换、替换：map方法

插入：数组展开+slice方法