React學習手冊-React執行機制筆記（二）

Day10發表於2018-09-28
React筆記

建立頁面

為了使用React，要運用兩個類庫：React和ReactDOM.React用來建立檢視；ReactDOM用來在瀏覽器中渲染UI。

虛擬DOM

虛擬DOM是由React元素組成的，概念上與HTML元素類似的，不過他們實際上是JavaScript物件。直接訪問JavaScript物件要比訪問DOM API高效的多。我們可以修改Javascript物件，即虛擬DOM，然後React會通過DOM API儘可能高效地渲染這些變更。

React元素

一個React元素是對實際DOM應該如果表示的具體描述。換句話說，React元素表示應該如何建立瀏覽器DOM的一組指令。

React.createElement('h1', // 元素名
    {id: 'recipe-0', 'data-type': 'title'}, //屬性
    'Bake Salmon' // 子節點，這裡是一個文字
);
<h1 data-reactroot id='recipe-0' date-type='title'>Bake Salmon</h1>
複製程式碼

ReactDOM

用ReactDOM渲染一個React元素。

ReactDom.render(reactElement, document.getElementById('target'))
複製程式碼

使用資料構造元素

React可以將資料和UI元素隔離。

React.createElement(
    'ul', // 元素名
    {className: 'ingredients'}, // 屬性，className代替class表示類名
    items.map((ingredient, i) =>  // item是一個JavaScript陣列
        React.createElement('li', {key: i}, ingredient); // key可以幫助react高效更新DOM
    ) // 子節點，這裡是一系列<li>
)
複製程式碼

React元件

三種建立元件的方法：

  1. React.createClass
const IngredirentsList = React.createClass({
    displayName: 'IngredirentsList',
    render () {
        return React.createElement('ul', {className: 'ingredients'},
            this.props.items.map((ingredient, i) =>
                React.createElement('li', {key: i}, ingredient);)
        )
    }
});
ReactDOM.render(
    React.createElement(IngredirentsList, {items}, null),  items是一個包含原料的陣列
    document.getElementById('target')
)
複製程式碼
  1. React.Component
class IngredientList extends React.Component {
    renderListItem (ingredient, i) {
        React.createElement('li', {key: i}, ingredient);)
    }
    
    render {
        return React.createElement('ul'. {className: 'ingredients'},
            this.props.items.map(this.renderListItem)
        )
    }
}
複製程式碼
  1. 無狀態函式式元件：是（純）函式而非物件，沒有this作用域
const IngredientList = props => 
    React.createElement('ul', {className: 'ingredients'},
    props.items.map((ingredient, i) => {
        React.createElement('li', {key: i}, ingredient);)
    })  
)
複製程式碼

三種方法適用場景： 1.無狀態元件：純展示元件，只負責展示傳入的props，不涉及state 2.createClass: 能用React.Component就別用這個方法了 3.React.Component: 推薦方法。 2、3的區別包括，this的繫結，prop和state配置的不同。詳情點選這裡

DOM渲染

如果有新DOM需要插入，ReactDOM以最小的代價完成插入，如果資料改變導致頁面的修改，那麼ReactDOM會更新更改的DOM元素。以確保搞笑的UI重繪。

相關文章