React学习

React学习笔记（二）

该学习笔记源于B站视频https://www.bilibili.com/video/av69359910/?p=2&t=397

1、props.chidren指的是标签里的内容，可以通过props传递任何东西，但是传递数字时要加花括号，要不然会当成字符串。prop-types用来检查类型,还可以检查是否必须的。
eg:函数组件

TodoHeader.PropTypes={
  desc:PropTypes.string,
  x:PropTypes.number.isRequired
}

类组件可以直接在内部写

static propTypes={
  btnText:PropTypes.string
}

设置默认值使用defaultProps

static defaultProps={
  btnText:'添加'
}

2、state:组件内部 props:组件外部
eg:state={title:'待办事项列表'}
引用:{this.state.title}
或者将state放入constructor中，这时需要在constructor中加super()。
函数组件没有this和state（称为无状态组件）。
受控组件：所有东西都是通过外部控制的，都是通过props获取的。
不知道使用state还是props的时候使用props就对了，因为受控组件数据源会统一一些，数据源永远在传递的地方，而不在本身里面

3、如果state里面是数组，可以使用循环渲染。

{
   this.state.todos.map(todo=>{
     return <div>{todo.title}</div>
   })
}

但是每一个循环需要有一个key

{
   this.state.todos.map(todo=>{
     return <div key={todo.id}>{todo.title}</div>
   })
}

dangerouslySetInnerHTML用来渲染带有标签的state属性

{
  <div dangerouslySetInnerHTML={{__html:this.state.article}} />
}

如果每改变state里的对象属性，就要在Todolist中给TodoItem添加或删除，这样就比较麻烦，可以用下面方法解决。

<TodoItem 
   key={todo.id}
   {...todo}
/>

4、找emoji从网站https://emojipedia.org中找。react中不能硬改状态，要通过setState修改。

//不能使用this.state.isLiked=!this.state.isLiked
//能修改数据，但页面不会渲染，要使用setState方法
//setState可以有两个参数，第一个参数有两种情况，第一种情况是一个对象，如下
handleLikedClick=()=>{
  this.setState({
    isLiked:!this.state.isLiked
  })
}
//第二种情况是一个方法,如下
  this.setState((prevState)=>{
  return{
    isLiked:!prevState.isLiked
    }
  }，()=>{
    //setstate是异步的，如果想要获取到最新的state，应该在这个回调里获取
    console.log(this.state.isLiked)
  })
//第二种方法好处：如果子组件很多
//你的state可能要根据子组件返回过来的值来定
//由于是异步的，你不知道this.state有没有更新，比较保险的方式就是使用上一次的state

5、input框改变
先在input中加onChange={this.handleInputChange}

handleInputChange=(e)=>{
  this.setState({
    inputValue:e.currentTarget.value
  })
}

如果想用handleInputChange(){ ...}可以改onChange={this.handleInputChange.bind(this)}，使得this指向明确，构造函数只执行一次，所以为了防止每渲染一次就要bind，可以将bind防在构造函数中。

this.handleInputChange=this.handleInputChange.bind(this)

如果子组件要在父组件中state对象中添加属性（不能用push，因为push返回的是数组长度），方法如下：

this.setState({
  todos:this.state.todos.concat({
    id:Math.random(),
    title:todoTitle
  })
})

6、react里面通过ref来获取组件或者Dom元素，要使用ref之前必须先调用React.creatRef方法,在constructor里创建ref，可以利用ref来做focus。

import {createRef} from 'react'

noop用来return undifined，也就是空函数，可以用
const { isComplated}=this.props
这样后面代码就不用this.props.isComplated，可以直接isComplated。
通过checkbox改变完成和未完成函数：

onComplatedChange=(id)=>{
  this.setState((prevState)=>{
    return {
       todos:prevState.todos.map(todo=>{
          if(todo.id===id){
            todo.isComplate=! todo.isComplate
          }
          return todo
       })
    }
  })
}