## element react中`element`是不可能更改的，它就像是電影中靜止的一幀。一旦你創建一個`element`，你就不能再修改它的`attributes`和`children`。 ``` function tick() { const element = ( <div> <h1>Hello, world!</h1> <h2>It is {new Date().toLocaleTimeString()}.</h2> </div> ); ReactDOM.render(element, document.getElementById('root')); } setInterval(tick, 1000); ``` 一個`React element`能夠代表不止一個的`dom 元素`。 ract值會渲染被改動的dom元素，而不是整個`element`都被重新渲染。 ## Component 概念上，組件就像是Javascript 中的函數，可以接收任意的輸入（我們稱之為`props`）并且能夠返回`React elements`作為返回值來描述我們需要在屏幕上顯示的真實DOM。 一個`JSX tag` 可以代表一個dom標簽，但也能代表一個用戶自定義的組件。 調用函數 --vs-- 調用組件 ```javascript let data = { author:{} ,date:'' ,text:'' } //把data中的所有屬性一一傳遞給Comment ReactDOM.render(<Comment {...data}/>,document.getElementById('root')); ``` All React components must act like pure functions with respect to their props. ## 組件的運行方式 1. render發現一個用戶自定義組件，如果標簽名是以大寫字母開頭就是用戶自定義組件，如果小寫字母開頭就是DOM組件 2. 普通的dom jsx元素是不能被識別的，如果你想渲染一個react組件，請用大寫字母開頭 3. 先把jsx屬性封裝成一個props對象，{name:'ahhh',age:'8'} 4. 把它作為參數傳遞給Welcome函數，獲取到一個返回值，返回值是一個React元素 5. render方法會把此react元素渲染到頁面上 ### 函數式組件和類組件 ``` //function function Welcome(props) { return <h1>Hello, {props.name}</h1>; } //class class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } } ReactDOM.render(<Welcome name='ahhh' age='123'/>,document.getElementById('root')); ``` 上面兩種方式是等價的，但類組件還有些特點，它能支持`state`狀態 ## 什么樣的適合封裝成一個組件 當你的react 經常被重復利用或則說足夠復雜 ## state ### 什么樣的pops適合被設置成狀態 If you don’t use something in render(), it shouldn’t be in the state. ### setState() ### State Updates May Be Asynchronous ``` this.setState((prevState,props)=>({counter:prevState.counter + Math.random()})); this.setState((prevState,props)=>({counter:prevState.counter + props.increment})) ``` ### State Updates are Merged