一些概念

• 組件：視圖的片段、內部管理數據集合（state）外部傳入配置結合（props）
• 包含： 1. 視圖標記（React的JSX、Vue的template）需要經過轉換而成為真實的DOM
• 2. 事件
• 3. 數據
• 4. 邏輯（存儲storage、數據結構化處理）
• 5. 外部的配置

屬性props和數據/狀態state的區別

1. state → 數據池 組件內部的管理數據的容器 組件內部可讀寫
2. props → 屬性池 外部調用組件時傳入的屬性集合 組件內容只讀不可寫

組件渲染過程

1. React主動調用Mytitle自定義組件
2. 將屬性集合轉換對象 props → { title: 'xxx'}
3. 將對象作為props傳入組件
4. 替換JSX中的props或者state中的變量
5. ReactDOM將最終的React元素通過一系列操作轉換成真實DOM進行渲染

組件調用規范

1. 視圖標記：HTML標簽 <h1></h1>
2. 大駝峰寫法作為一個React元素 <Mytitle />組件 → JSX → React元素
3. 組件轉換React元素 React.createElement參考下面代碼

使用props（類組件）

class Mytitle extends React.Component {constructor(props) {super(props)}state = {title: this.props.title}changeTitle() {this.setState({title: 'new title'})}render() {return (<div><h1>{this.state.title}</h1><button onClick={this.changeTitle.bind(this)}>修改</button></div>)}
}
ReactDOM.render(<Mytitle title="init title" />,document.getElementById('app')
)

使用hooks（函數組件，不寫class了）

• 函數組件一定要是一個純函數（入參不可修改，能保證絕對的復用性）
• 注意onClick綁定的不是函數執行setTitle('new title')，而應該是一個匿名函數
• 或者用bind返回一個函數

function Mytitle(props) {const [title, setTitle] = React.useState(props.title)return (<div><h1>{title}</h1><button onClick={() => setTitle('new title')}>修改</button>// or// <button onClick={setTitle.bind(this, 'new title')}>修改</button></div>)
}
ReactDOM.render(<Mytitle title="init title" />,document.getElementById('app')
)
// or不寫jsx
// ReactDOM.render(
//     React.createElement(Mytitle, {
//         title: 'init title'
//     }),
//     document.getElementById('app')
// )

使用展開運算符

// 省略
state = {title: 'title',author: 'author'
}
render(){return (<Title {...this.state }/>)
}
// 相當于 <Title title="this.state.title" author="this.state.author" />