為什么要使用組件

將頁(yè)面組件化頁(yè)面結(jié)構(gòu)更清晰，增加復(fù)用也更便于管理。

編寫(xiě)組件

• 組件，從概念上類似于 JavaScript 函數(shù)。它接受任意的入?yún)ⅲ?“props”），并返回用于描述頁(yè)面展示內(nèi)容的 React 元素。
• 組件有兩種書(shū)寫(xiě)方式，函數(shù)組件和class組件。

注意： 組件名稱必須以大寫(xiě)字母開(kāi)頭。
React 會(huì)將以小寫(xiě)字母開(kāi)頭的組件視為原生 DOM 標(biāo)簽。例如，<div /> 代表 HTML 的 div 標(biāo)簽，而 <Welcome /> 則代表一個(gè)組件，并且需在作用域內(nèi)使用 Welcome。

#函數(shù)組件
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
#類組件
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

渲染組件

React元素可以是dom標(biāo)簽，也可以是React組件。

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

const element = <Welcome name="Tony" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

組合組件

將多個(gè)組件組合成一個(gè)組件，即把組件的不同功能點(diǎn)進(jìn)行分離。按鈕，表單，對(duì)話框，甚至整個(gè)屏幕的內(nèi)容：在 React 應(yīng)用程序中，這些通常都會(huì)以組件的形式表示。

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

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

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

Props 的只讀性

組件無(wú)論是使用函數(shù)聲明還是class 聲明都絕對(duì)不能修改自身的 props。
所有 React 組件都必須像純函數(shù)一樣保護(hù)它們的 props 不被更改。

純函數(shù)：同樣的輸入，都返回同樣的結(jié)果。