react 也就這么回事 05 —— 組件 & Props-有解無憂

什么是組件：用來實作區域功能的可復用代碼片段

比如很多界面會用到“分頁”功能，因此可以將它封裝成獨立的組件

這樣用到分頁的界面只需引入該組件而不必重新寫代碼

1 定義組件

在 React 中有兩種組件，一種是函陣列件，一種是類組件

1.1 函陣列件

定義組件最簡單的方式就是撰寫 JavaScript 函式

對 React 來說，能夠回傳一個 React 元素的函式就叫組件

function MyComponent() {
    return <h2>我是一個函陣列件</h2>;
}

在線代碼

1.2 class 組件

類組件的宣告程序會比較繁瑣一些，需要使用 class、extends 關鍵字，來繼承React.Component{}

render()函式會回傳該類的實體要創建的元素，

class MyComponent extends React.Component {
    render() {
        return <h2>我是一個class組件</h2>;
    }
}

在線代碼

無論是函陣列件還是class組件，在 React 中是等效的，不過 class 組件有更多的特性

2 渲染組件

同一個組件在不同界面使用，可能會想要展示不同的內容

比如我們自定義的組件包含了一個h2標簽，如果我們想要在兩個不同的界面分別展示函式和class怎么辦？

可以在使用組件時添加屬性，react 會將添加的屬性轉換為一個物件傳遞給組件，這個物件稱為"props"

函陣列件和class組件可以分別通過“形參”和實體屬性來使用這個物件

比如:

function MyComponent(props) {
    console.log(props)
    return <h2>我是一個函陣列件</h2>;
}
ReactDOM.render(
    <MyComponent a="1" b="2" />,
    document.getElementById("root")
);

class MyComponent extends React.Component {
    render() {
        console.log(this.props);
        return <h2>我是一個class組件</h2>;
    }
}
ReactDOM.render(
    <MyComponent a="1" b="2" />,
    document.getElementById("root")
);

兩者輸出同樣的物件：

在線代碼

于是我們可以傳入不同的屬性，來讓組件呈現不同的內容：

function MyComponent(props) {
    return <h2>我是一個{props.name}組件</h2>;
}

ReactDOM.render(
    <MyComponent name="自定義函式" />,
    document.getElementById("root")
);

在線代碼

這個例子中發生了這些事：

我們呼叫 ReactDOM.render() 函式，并傳入 <MyComponent name="自定義函式" /> 作為引數，
React 呼叫 MyComponent 組件，并將 {name: '自定義函式'} 作為 props 傳入，
MyComponent 組件將 <h2>我是一個自定義函陣列件</h2> 元素作為回傳值，
React DOM 將 DOM 高效地更新為 <h2>我是一個自定義函陣列件</h2>，

3 注意點

組件名稱必須以大寫字母開頭，
傳入屬性值為字串和數字的區別：

數字：<MyComponent a={1} />

字串：<MyComponent a="1" />

多個屬性可以使用擴展運算子

const obj = { name: 'React', age: 18 }
<MyComponent {...obj} />

注意{}不能省略

在線代碼

3 組合組件

組件可以在其輸出中參考其他組件

例如，我們可以創建一個可以多次渲染 Welcome 組件的 App 組件：

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')
);

這就可以讓我們用同一組件來構建不同層次的新組件

在線代碼

4 提取組件

對于一個復雜的組件，我們應該盡量將其拆分為更小的組件，以提高其可維護性和可讀性

例如，參考如下 Comment 組件：

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <img className="Avatar"
          src=https://www.cnblogs.com/bidong/archive/2022/03/14/{props.author.avatarUrl}
          alt={props.author.name}
        />


該組件用于描述一個社交媒體網站上的評論功能，它接收 author（物件），text （字串）以及 date（日期）作為 props，
該組件由于嵌套的關系，變得難以維護，且很難復用它的各個部分，因此，讓我們從中提取一些組件出來，
首先，我們將提取 Avatar 組件：
function Avatar(props) {
  return (
    <img className="Avatar"
      src=https://www.cnblogs.com/bidong/archive/2022/03/14/{props.user.avatarUrl}
      alt={props.user.name}
    />
  );
}

Avatar 不需知道它在 Comment 組件內部是如何渲染的，因此，我們給它的 props 起了一個更通用的名字：user，而不是 author，
建議從組件自身的角度命名 props，而不是依賴于呼叫組件的背景關系命名，
現在可以在Comment中參考Avatar組件了：
function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <Avatar user={props.author} />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

接下來，我們將提取 UserInfo 組件，該組件在用戶名旁渲染 Avatar 組件：
function UserInfo(props) {
  return (
    <div className="UserInfo">
      <Avatar user={props.user} />
      <div className="UserInfo-name">
        {props.user.name}
      </div>
    </div>
  );
}

進一步簡化 Comment 組件：
function Comment(props) {
  return (
    <div className="Comment">
      <UserInfo user={props.author} />
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

5 Props 的只讀性
對于 props，React 有一個嚴格的規則：

組件無論是使用函式宣告還是通過 class 宣告，都決不能修改自身的 props，

6 計時器
function tick() {
  const element = (
 		<h2>當前時間： {new Date().toLocaleTimeString()}.</h2>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

這個例子中，每秒呼叫一次 tick 函式，頁面會更新當前時間
在線代碼
將它封裝為一個組件：
class Clock extends React.Component {
  render() {
    return <h2>現在時間：{new Date().toLocaleTimeString()}</h2>;
  }
}

function tick() {
  ReactDOM.render(<Clock />, document.getElementById("root"));
}

setInterval(tick, 1000);

我們將時間寫死在了 JSX 中
在線代碼
如果我們想自己傳入顯示的內容：
class Clock extends React.Component {
  render() {
    const time = this.props.time;
    return <h2>現在時間：{time}</h2>;
  }
}

function tick() {
  ReactDOM.render(
    <Clock time={new Date().toLocaleTimeString()} />,
    document.getElementById("root")
  );
}

setInterval(tick, 1000);

這樣我們就可以控制顯示的格式
在線代碼

公眾號【前端嘛】




    






        
      轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/443486.html
      標籤：其他 
      上一篇：Ajax教程及案例
下一篇：解決 Vue 專案 invalid host header 問題（兩種方案）