React.js入門與實戰

虛擬DOM

提升速度原因

https://www.zhihu.com/question/31809713/answer/53544875
diff 演算法

1. 步驟一：用JS物件模擬DOM樹
2. 步驟二：比較兩棵虛擬DOM樹的差異
3. 步驟三：把差異應用到真正的DOM樹上

React元件

render()用於將模板轉為 HTML 語言，並插入指定的 DOM 節點(主節點預設是Root)。
定義元件 + 匯出元件。

export default class ComponentHeader extends React.Component{
    render(){
        return(
            <header>
                <h1>頭部</h1>
            </header>
            )
    }
}

入口引用元件

import ComponentHeader from './js/components/header.js';


class Index extends React.Component{
    render(){
        return (
            <ComponentHeader></ComponentHeader>
            )
    }
}


// 繫結

ReactDOM.render(<Index/>,document.getElementById('root'));

• return 返回必須只有一個節點，也就是不能有兄弟節點
  
  • 所以可以用一個div做一個包裹。
  • 元件化巢狀

JSX內建表示式，註釋

html字元轉義沒有用處，可以使用Unicode轉碼
dangerouslySetInnerHTML注意大小寫，可能存在XSS攻擊危險

import React from 'react';

export default class ComponentHeader extends React.Component{
    render(){

        var username = '含笑';
        var boolInput = false;
        var html = "1 1";

        return(
            <header>
                <p>{username == '' ? '使用者名稱為空' : '使用者名稱' + username}</p>
                <input type="button" value= {username} disabled={boolInput} />
                {html}
                <div dangerouslySetInnerHTML = {{__html : html}}></div>
            </header>
            )
    }
}

生命週期

正確順序
componentWillMount(){
        console.log('componentWillMount');
    }
render(){
        console.log('render');  
componentDidMount(){
        console.log('componentDIDMount');
    }

React屬性與事件

State屬性

state(頁面狀態)-virtual dom-Dom

作用域在存在於該元件，不汙染其他元件
class MessageBox extends Component {
    constructor(){
        super(); //呼叫基類的所有初始化方法
        this.state = {messages:[
            {id:1,name:"李四",content:"今天真涼快！",createAt:new Date()}
        ]}
    }

修改

 this.setState({})

props屬性

資料繫結

使用es6的語法構建元件，那麼在你元件裡寫的函式在構造器裡都需要手動繫結this，如果使用es5的React.createClass()建立元件，this反而會自動繫結為當前組建例項。
如果是箭頭函式就不需要bind(this)

第一種寫法:
_handleClick(e) {
    console.log(this);
}
render() {
    return (
        <div>
            <h1 onClick={this._handleClick.bind(this)}>點選</h1>
        </div>
    );
}

第三種寫法：
_handleClick = (e) => {
    // 使用箭頭函式(arrow function)
    console.log(this);
}
render() {
    return (
        <div>
            <h1 onClick={this._handleClick}>點選</h1>
        </div>
    );
}

在子頁面（繫結）向父頁面（父頁面定義並且繫結.bind(this)）傳參時，只能通過事件來執行

報錯：TypeError: Super expression must either be null or a function, not undefined
解決：說明你extend的那個函式沒有匯出相應的屬性
如果碰到這個問題不要去百度了，先做50個俯臥撐，因為你是單詞寫錯了，出現這個問題百分之99.99是因為單詞寫錯了，反正我是把Component寫成了Compontent

• getDefaultProps通過元件呼叫方呼叫元件時指定，一旦指定一般情況下不會變，擁有者是呼叫方
• getInitalState私屬於當前元件，值可變