對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 都會自動更新其子元件。