redis筆記之過期策略
阿新 • • 發佈：2020-12-16
元件
如果程式碼多了之後，不可能一直在render方法裡寫，所以就需要把裡面的程式碼提出來，定義一個變數，像這樣：
const app = <h1>歡迎進入React的世界</h1>
ReactDOM.render(
<div>
{ app }
</div>
document.getElementById('root')
)
函式式
這裡我們定義的方法實際上也是react定義元件的第一種方式-定義函式式元件，這也是無狀態元件。
方式一：函式式元件
const 元件名(首字母大寫)=（props）=>{
return jsx表示式
}
const App = (props) => {
return (
<h1>函式元件</h1>
)
}
ReactDOM.render(
// React元件的呼叫方式
<App/>,
document.getElementById('root')
)
這樣一個完整的函式式元件就定義好了。但要注意！注意！注意！元件名必須大寫，否則報錯。
class元件
ES6的加入讓JavaScript直接支援使用class來定義一個類，react的第二種建立元件的方式就是使用的類的繼承ES6 class是目前官方推薦的使用方式，它使用了ES6標準語法來構建，看以下程式碼：
class 元件名 extends React.Component {
render(){ //render是必不可少的鉤子函式
return jsx表示式
}
}
<body> <div id="app"> </div> <script type="text/babel"> class App extends React.Component{ render(){ return ( <h1>class元件</h1> ) } } ReactDOM.render( <App/>,document.getElementById("app") ) </script> </body>