React学习笔记 (一)

函数式组件和类组件的区别
1，函数式组件写法：

export default function TodoHeader(props) {
    console.log(props)
    return (
         <div>
         </div>
    )
}

2,类组件写法：

export default class TodoInput extends Component {
    render() {
        return (
            <div>
            </div>
        )
    }
}

区别：
只有类组件才有state参数
类组件在调用props和state参数的时候需要用this关键字调用，函数式组件不需要

3,事件绑定的几种写法：
1）匿名函数式写法，不推荐，因为匿名函数在render()函数内，render()函数每渲染一次，都会生成一个新的匿名函数

render(){
    return(
         <div>
               <button 
                   onClick={() =>{
                        console.log('value')
                   }}>{this.props.value}</button>
         </div>
    )
}

2)在匿名函数是写法的基础上改进，将匿名函数提到render()函数外，避免了render()渲染可能造成的多次生成匿名函数的问题，比较推荐这种写法，也是比较常见的写法

handleClick = () =>{
}
render(){
    return(
         <div>
               <button  onClick={this.handleClick}>{this.props.value}</button>
         </div>
    )
}

3)bind()函数绑定，在需要传递参数的时候才会考虑这种写法，因为同样bind在render()函数内部，会多次渲染,123就是bind()传递的值

handleClick(id){
    console.log(id)
}
render(){
    return(
         <div>
               <button  onClick={this.handleClick.bind(this，123)}>{this.props.value}</button>
         </div>
    )
}

4）

constructor(){
     super()
     this.handleClickCopy = this.handleClick.bind(this)
}
handleClick(id){
    console.log(id)
}
render(){
    return(
         <div>
               <button  onClick={this.handleClickCopy}>{this.props.value}</button>
         </div>
    )
}

4,事件传参的写法
1)同样是匿名函数式写法，同样不推荐

handleClick = (id) =>{
    console.log(id)
}
render(){
    return(
         <div>
               <button  onClick={() =>{
                      this.handleClick(123)
               }}>{this.props.value}</button>
         </div>
    )
}

5，数组添加值的两种写法
1）通过slice函数复制一个数组，然后再对这个数组用push()函数去添加新的数据，最后通过setstate方法赋值给state

 const newTodos = this.state.todos.slice();
        newTodos.push({
            id: Math.random(),
            title: title,
            isDownload: false
        });
        this.setState({
            todos: newTodos
        })

2）直接用concat方法

this.setState({
            //这里不能用this.state.todos.push函数，因为push函数返回的是数组的长度，而不是数组对象
            todos: this.state.todos.concat({
                id: Math.random(),
                title: title,
                isDownload: false
            })
        })