對react進行研究 入門

2022-06-23 19:45:16 字數 1753 閱讀 3152

class shoppinglist extends react.component 

}

其中,shoppinglist 是一個 react 元件類,或者說是一個 react 元件型別。一個元件接收一些引數,我們把這些引數叫做props(“props” 是 “properties” 簡寫),然後通過render方法返回需要展示在螢幕上的檢視的層次結構。

render方法的返回值描述了你希望在螢幕上看到的內容。react 根據描述,然後把結果展示出來。更具體地來說,render返回了一個 react 元素,這是一種對渲染內容的輕量級描述。大多數的 react 開發者使用了一種名為 “jsx” 的特殊語法,jsx 可以讓你更輕鬆地書寫這些結構。語法會被編譯成react.createelement('div')。上述的**等同於:

return react.createelement('div', ,

react.createelement('h1', /* ... h1 children ... */),

react.createelement('ul', /* ... ul children ... */)

);

在 board 元件的rendersquare方法中,我們將**改寫成下面這樣,傳遞一個名為value的 prop 到 square 當中:

class board extends react.component  />;

}}

class square extends react.component >

);}}

在 react 應用中,資料通過 props 的傳遞,從父元件流向子元件。

class square extends react.component }>>

);}}

class square extends react.component >>

); }}

class square extends react.component ;

} render() >>

);}}

class square extends react.component ;

} render() )}

>>

);}}

在 square 元件render方法中的onclick事件監聽函式中呼叫this.setstate,我們就可以在每次被點選的時候通知 react 去重新渲染 square 元件。元件更新之後,square 元件的this.state.value的值會變為'x',因此,我們在遊戲棋盤上就能看見x了。點選任意一個方格,x就會出現了。

每次在元件中呼叫setstate時,react 都會自動更新其子元件。