一些概念

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

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

state → 數據池 組件內部的管理數據的容器 組件內部可讀寫

props → 屬性池 外部調用組件時傳入的屬性集合 組件內容只讀不可寫

組件渲染過程

React主動調用Mytitle自定義組件

將屬性集合轉換對象 props → { title: 'xxx'}

將對象作為props傳入組件

替換JSX中的props或者state中的變量

ReactDOM將最終的React元素通過一系列操作轉換成真實DOM進行渲染

組件調用規范

視圖標記：HTML標簽 <h1></h1>

大駝峰寫法作為一個React元素 <Mytitle />組件 → JSX → React元素

組件轉換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" />

總結

以上是生活随笔為你收集整理的04 组件与Props的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。