React.js-问题总结

1. 需要在render中的HTML外层包围一个DIV，如果外层不需要这个DIV，可以使用react中带的<Fragment></Fragment>来包起来，代替DIV。
2. 函数接收this要通过this.fun.bind(this)这样才可以在fun函数中正确使用this，利用箭头函数写方法也可以，因为前天函数中this就是当前上下文的this，它本身没有。
3. 循环DOM时要加key树形，主要为每个DOM 设置不同的值。
4. 数组展开符号（...），使用如下：

   let a = this.cur++;

   this.list = [...this.list,a]

   console.log(this.list)

5. JSX中注释是这样的：

   {
           //正确注释的写法 
       }

   {/* 正确注释的写法 */}

6. react中class=‘box’要写成className=‘box’,防止js中class函数声明冲突，所以换成这种。
7. JSX是不会直接渲染HTML的，可以使用如下方法：

    dangerouslySetInnerHTML={{__html:item}}

8. label和input的关系，一般label属性for=“id”，input属性id="id",这样在react中不行，要把label的for换成htmlFor=‘id’,这样就可以了，主要给js中for循环分开。
9.  在VScode中安装Simple React Snippets可以快速生成代码结构。
10. 父组件向子组件传值：

    //父组件
    <Item msg="Hello"></Item>
    //子组件
    <h1>{this.props.msg}</h1>

     

11.  子组件向父组件传值,React明确要求子组件是不允许直接操作父组件数据的，但是这个时候可以利用子组件调用父组件的方法，可以利用方法去把子组件的值传入父组件的方法中，在方法中去接收值，进行改变，

    //父组件方法
    this.state.list.map((item,index)=>{
                return (
                    <Item 
                    key={index+item}  
                    content={item}
                    index={index} 
                    deleteItem={this.deleteItem.bind(this)/>
                )
            })
    deteleItem(index){
        this.setState({
            index:index
        })
    }
    
    //子组件
     <div onClick={this.handleClick.bind(this)}>
            {this.props.content}
        </div>
    handleClick(){
        this.props.deleteItem(this.props.index)
    }

     

深浅拷贝：

简单来说，浅复制只复制一层对象的属性，而深复制则递归复制了所有层级。

因为浅复制只会将对象的各个属性进行依次复制，并不会进行递归复制，而 JavaScript 存储对象都是存地址的，所以浅复制会导致 obj.arr 和 shallowObj.arr 指向同一块内存地址。

而深复制则不同，它不仅将原对象的各个属性逐个复制出去，而且将原对象各个属性所包含的对象也依次采用深复制的方法递归复制到新对象上。这就不会存在上面 obj 和 shallowObj 的 arr 属性指向同一个对象的问题。

https://www.zhihu.com/question/23031215

https://zhuanlan.zhihu.com/p/26282765