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方法