React筆記（核心概念部分）

核心概念

1. JSX

• JSX是javascript的語法擴展，在JSX中能夠在大括號{}內放置任何有效的javascript表達式。
• JSX也是一個表達式，能夠在if和for循環代碼塊中使用JSX。
• 經過引號將屬性值指定爲字符串字面量，使用大括號將屬性值指定爲j s表達式
• React DOM 使用 camelCase（小駝峯命名）來定義屬性的名稱，而不使用 HTML 屬性名稱的命名約定。例如在JSX中class變爲className

const name = 'Jade';
  const element = <div>
    <h1 className='weclome'>Hello, {name}</h1>
    <input type='text' defaultValue={name} />
  </div>;

  ReactDOM.render(
     element,
     document.getElementById('root')
  );

2. props

• 當 React 元素爲用戶自定義組件時，它會將 JSX 所接收的屬性以及子組件轉換爲單個對象傳遞給組件，這個對象被稱之爲 「props」。
• 組件不管是使用函數聲明仍是class聲明，都不能修改自身的 props，props爲只讀。

3. State

• state是組件私有化，且徹底受控於當前組件，簡單說，徹底props，state在組件內能夠隨意修改。定義state應該在class構造函數constructor中，state能夠傳遞給子組件，數據是向下流動。

• 關於修改state，應該使用setState()，而不是直接賦值。

  • this.setState({name: 'Jade'}); //correct

  • this.state.name = 'jade'; // wrong

  • setState()爲異步，多個setState()會合併爲一個調用。因此最好不要依賴它們的值來更新下一個狀態。

  • 關於異步的問題，可讓setState()接受一個函數來解決，該函數接受兩個參數，用上一個 state 做爲第一個參數，將這次更新被應用時的 props 作爲第二個參數。

4. 事件處理

• 不能經過return false;阻止默認行爲，只能是e.preventDefault()。

• JSX中回調問題，事件回調必須綁定this，否則回調中this爲undefined。緣由在於js函數工做原理：

  const obj = {  
   name: 'Jade',  
   say: function () {  
   console.log(this);  
   }  
  };  
  
  const test = obj.say;  
  ​  
  obj.say(); // {name: "Jade", say: ƒ}  
  test(); // undefined

  在js中，傳遞一個函數名給一個變量，而後在變量後加上（）調用這個方法，此時方法內部的this的指向就丟失。在React中，OnClick其實就是一箇中間變量，因此this會丟失。

• 關於事件回調中this丟失的解決辦法有如下：

  • 使用bind綁定this，<a onClick={this.click.bind(this)}>點擊</a>。

  • 使用箭頭函數定義事件回調 this.click = () => { //do something }

  • 使用箭頭函數調用事件回調<a onClick={() => this.click()}>點擊</a>

  • 事件傳遞參數的方法有兩種，分別是經過箭頭函數和bind，事件對象e會被視爲第二個參數，不一樣的是，箭頭函數的方式必須顯式的傳入e，bind則不須要，以下：

    *   `<a onClick={(e) => this.click(id, e)}>點擊</a>`
        
    *   `<a onClick={this.click.bind(this, id)}>點擊</a>`

5. 表單

• 受控組件：表單中存在一個input，其value值必須是咱們設置在constructor構造函數中的state的值，經過onChange事件改變state中的值，最終造成一個循環的迴路影響。
• 非受控組件：非受控也就意味着我能夠不須要設置它的state屬性，而經過ref來操做真實的DOM。

6. 組件之間通信

• 父子通信:

// Context 可讓咱們無須明確地傳遍每個組件，就能將值深刻傳遞進組件樹。
// 使用場景： 嵌套多層的組件，且每層組件可能都會用到某個變量
// 缺點：致使組件的複用性下降
const NameContext = React.createContext('Jade'); // 默認值‘Jade’
class App extends React.Component {
  render() {
    return (
      // 使用Provider，將變量傳遞給下面的全部組件
        <NameContext.provider value='Jadeee'>
          <PageHeader />
      </NameContext>
    )
  }
}

class PageHeader extends React.Component {
  render() {
    // 中組件不用在手動傳遞了
    return <UserName />
  }
}
  
class UserName extends React.Component {
  
  static contentType = NameContext;
  render() {
    return <p> {this.context} </P>
  }
}

// 父子通信主要經過props傳遞參數，數據自上而下流動，實現父子通信
class ChildrenComponent extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
              {/* 接受從父組件傳遞而來的title */}
            <h1> {this.props.title} </h1>
        )
    }
}

class ParentComponent extends React.Component {
    constructor(props) {
        super(props);
          this.state = {
          title: '標題'
        }
    }

    render() {
        return (
              {/* 將this.state.title傳遞給子組件 */}
             <ChildrenComponent title={this.state.title} />
        )
    }
}

• 子父通信:

class ChildrenComponent extends React.Component {
    constructor(props) {
        super(props);
          this.state = {
          name: 'children component'
        }
    }

    clickBtn() {
          // 調用父組件方法並將參數傳遞給父組件
        this.props.onClickChildren(this.state.name);
    }

    render() {
        return (
            <button type="button" onClick={this.clickBtn.bind(this)}>
                  Click Me!
            </button>
        )
    }
}

class ParentComponent extends React.Component {
    constructor(props) {
        super(props);
    }

      // 子組件調用，val參數爲子組件傳遞過來
    onClickChildren(val) {
        console.log(val); // children component
    }

    render() {
        return (
            <div>
                      {/* 將onClickChildren()方法做爲props傳遞給子組件 */}
                 <ChildrenComponent 
                          onClickChildren={this.onClickChildren.bind(this)} />
            </div>
        )
    }
}

• 子子通信：

  • eventBus
  • Redux