52 React引入插件 TODOList一些注意点

 1.React引入插件

1---搜索react，找到下面作者的插件

 2---快捷代码

 <p> rcc代表react class component</p>
 <p> rfc代表react function component</p>

3---更多快捷代码

4---快捷代码链接

https://github.com/dsznajder/vscode-react-javascript-snippets/blob/HEAD/docs/Snippets.mdhttps://github.com/dsznajder/vscode-react-javascript-snippets/blob/HEAD/docs/Snippets.md

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