React -- 組件封裝&props

一、組件封裝

一個函數就是一個組件，該函數接受一個props對象，並返回一個React元素

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

通過class和React.Component也可以定義一個組件，跟上面的組件是等價的

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

二、聲明組件

感覺其實聲明一個React元素，只不過這個元素是以組件名字命名的類似單標簽模式，里面寫入要傳入的props
比如上面創建的是Welcome組件，那么渲染時就是這樣的
TipsReact中，自己封裝的組件名字必須以大寫字母開頭，否則會識別為原生DOM標簽

const element = <Welcome name="World" />

三、渲染組件

通過ReactDOM.render()函數就可以將組件渲染出來了

ReactDOM.render(
  element,
  document.getElementById('root')
);

四、組件嵌套

可以在組件里面，嵌套使用別的組件，比如創建一個新的App組件，在里面重復調用Welcome組件，然后渲染出去

function App() {
  return (
    <div>
      <Welcome name="World" />
      <Welcome name="React" />  
    </div>
  )
}

渲染

ReactDOM.render(<App />,document.getElementById('root'))

五、組件分離

其實組件分離有點類似vue的組件化開發，可以把任何一個功能當成是一個組件，單獨分離出來，以備復用，這個組件分離就是將一個復雜的組件里面的一些數據單獨提取出來組成一個新的組件
比如上面的App組件，正常應該是這樣的：

function App() {
  return (
    <div>
      <h1>Hello World</h1>
      <h1>Hello React</h1>  
    </div>
  )
}

然后把h1標簽部分提取出來為一個單獨的組件使用，就變成了這樣，成為一個Welcome組件

function App() {
  return (
    <div>
      <Welcome name="World" />
      <Welcome name="React" />  
    </div>
  )
}