1.React引入插件
1---搜索react,找到下面作者的插件
2---快捷代码
<p> rcc代表react class component</p>
<p> rfc代表react function component</p>
3---更多快捷代码
4---快捷代码链接
2.TODOList注意点
1---父传子--props
父组件中
<List todos={todos} />
子组件中
const {todos} = this.props
或
this.props.todos
2---子传父---给子组件传递回调函数,父组件中调用这个回调
父组件中
//回调
addTodo = (todoObj) => {
//获取原todos
const { todos } = this.state
//追加一个todo
const newTodos = [todoObj, ...todos]
//更新状态
this.setState({ todos: newTodos })
}
//给子组件传递函数
<Header addTodo={this.addTodo} />
----------------------------------------------------
子组件中
//调用改回调,并给回调穿入参数
this.props.addTodo(todoObj)
3---checkbox中的defaultChecked属性
不要去使用:checkbox中defaultChecked:确定一上来勾不勾选,后续允许改,但是只能指定一次,不要去使用
4---是否需要ref
绑定的元素和要操作的元素是同一个元素,不用ref,直接用event时间对象event.target.value
5---唯一标识库nanoid
可以使用uuid但是库比较大,不推荐
nanoid的使用:
npm i nanoid
import {nanoid} from 'nanoid'
唯一标识nanoid()
6---内联函数需要传递参数时
第一种:使用高阶函数-----------------------------------------------------
onMouseLeave={this.handleMouse(false)}
直接写小括号相当于直接调用,使用高级函数,调用返回的函数
//鼠标移入移出
handleMouse = (flag) => {
return () => {
this.setState({ mouse: flag })
}
}
第二种:使用返回函数回调-------------------------------------------------
onMouseLeave={(event)=>{this.handleMouse(false)}}
7---对对象中的某一个属性需要更改时
let obj={a:1,b:2} //要求复制一个obj,将b改为3
let obj2={...obj,b:3} //{a:1,b:3}
8---对props进行类型限定 PropTypes 以及 默认 defaultProps
React脚手架没有引入prop-types这个库
操作方法:
npm i prop-types
//引入
import PropTypes from "prop-types"
class Demo extends React.Component {
static propTypes={
age:PropTypes.func.isRequired //string,array,number,func 小写字母开头
}
}
---------------------------------------------------------
static defaultProps={
age:18
}
9---对数组进行统计 以及 复选框取值target.value.checked(注意一下)
对数组进行统计reduce
arr.reduce((pre,currentItem)=>{return pre+currentItem},startValue)
pre:上一次的返回值
currentItem:当前数组的项
startValue:开始值
返回值为最后一次的值
假设arr=[1,2,3,4,5]
arr.reduce((pre,currentItem)=>{return pre+currentItem},0)
上一次返回值 当前
pre currentItem
第一次 startValue=0 1
第二次 0+1=1 2
第三次 1+2=3 3
第四次 3+3=6 4
第五次 6+4=10 5
返回值 10+5=15
10---小总结
11---在jsx文件中,用户自定义代码片段不生效问题
下面scope生效范围添加上javascriptreact
{
"()=>{}": {
"scope": "javascript,typescript,javascriptreact",
"prefix": "df",
"body": [
"()=>{\n\t$0\n}"
],
"description": "箭头函数"
}
}
VSCode用户代码段在jsx中不起作用(示例代码)_136.lahttps://www.136.la/javascript/show-57401.html