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