react小書學習筆記

是你的山楂發表於2018-08-06
React筆記

先貼個學習連結  http://huziketang.mangojuice.top/books/react/

第一階段

  1. {} 內可以放任何 JavaScript 的程式碼，包括變數、表示式計算、函式執行等等。 render 會把這些程式碼返回的內容如實地渲染到頁面上，非常的靈活。

  2. 我們來一個關於 state 和 props 的總結。

    state 的主要作用是用於元件儲存、控制、修改

    自己
    的可變狀態。state 在元件內部初始化，可以被元件自身修改，而外部不能訪問也不能修改。你可以認為 state 是一個區域性的、只能被元件自身控制的資料來源。state 中狀態可以通過 this.setState方法進行更新，setState 會導致元件的重新渲染。

    props 的主要作用是讓使用該元件的父元件可以傳入引數來配置該元件。它是外部傳進來的配置引數，元件內部無法控制也無法修改。除非外部元件主動傳入新的 props，否則元件的 props 永遠保持不變。

    state 和 props 有著千絲萬縷的關係。它們都可以決定元件的行為和顯示形態。一個元件的 state 中的資料可以通過 props 傳給子元件，一個元件可以使用外部傳入的 props 來初始化自己的 state。但是它們的職責其實非常明晰分明：

    state 是讓元件控制自己的狀態，props 是讓外部對元件自己進行配置。

    如果你覺得還是搞不清 state 和 props 的使用場景，那麼請記住一個簡單的規則：儘量少地用 state，儘量多地用 props。

    沒有 state 的元件叫無狀態元件（stateless component），設定了 state 的叫做有狀態元件（stateful component）。因為狀態會帶來管理的複雜性，我們儘量多地寫無狀態元件，儘量少地寫有狀態的元件。這樣會降低程式碼維護的難度，也會在一定程度上增強元件的可複用性。前端應用狀態管理是一個複雜的問題，我們後續會繼續討論。

第二階段

  1. state = {
      arras: []
    }
    現在存在兩個同級元件：
    compoment1需要用arras
    compoment2也需要用arras 
    這時，如果把arras存放在任意一個元件的state中，另一個元件都無法獲取到資料。所以，我們將arras放在compoment1和compoment2的公共父元件compoment中，再利用props傳遞資料給兩個子元件。這種方式叫狀態提升。
  2. 元件掛載

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

會被編譯成: 
ReactDom.render(
    React.createElement(Header, null)
    document.getElementById('root')
)           //其實我們把Header元件傳給React.createElement函式，又把函式返回結果傳給React.render

具體過程：
const header = new Header(props, children)
const headerJsxObject = header.render()
const headerDOM = crateDOMFromObject(headerJsxObject)
document.getElementById('root').appendChild(headerDOM )


-> constructor()
-> componentWillMount()
-> render()
// 然後構造 DOM 元素插入頁面
-> componentDidMount()


class Header extends Component {
  constructor () {
    super()
    console.log('construct')
  }

  componentWillMount () {
    console.log('component will mount')
  }

  componentDidMount () {
    console.log('component did mount')
  }

  render () {
    console.log('render')
    return (
      <div>
        <h1 className='title'>React 小書</h1>
      </div>
    )
  }
}
=>
construct
component will mount
render
component did mount



複製程式碼

第三階段


相關文章