【React學(xué)習(xí)筆記】一、組件新增、擴(kuò)展與使用

prop 父?jìng)髯?/h2>

在 React 應(yīng)用中，數(shù)據(jù)通過 props 的傳遞，從父組件流向子組件
Child 是一個(gè) React 組件類，或者說是一個(gè) React 組件類型。

一個(gè)組件接收一些參數(shù)，我們把這些參數(shù)叫做 props（“props” 是 “properties” 簡(jiǎn)寫），然后通過 render 方法返回需要展示在屏幕上的視圖的層次結(jié)構(gòu)

props.children

class Child extends React.Component {
    render() {
        return (
        <button className=acceptValue" onClick={() => alert('click')}>
            父組件流向子組件的值為: {this.props.value}
        </button>
        );
    }
}
// 用法示例: <Child value="X" />

class Father extends React.Component {
    renderChild(i) {
        return <Child value={i} />;
    }

    render() {
        return (
            <div>
                <div className="provideValue"> {this.renderChild(0)}</div>
            </div>
        );
    }
}

state 來實(shí)現(xiàn)所謂“記憶”的功能。

可以通過在React 組件的構(gòu)造函數(shù)中設(shè)置 this.state 來初始化 state。this.state 應(yīng)該被視為一個(gè)組件的私有屬性。我們?cè)?this.state 中存儲(chǔ)當(dāng)前每個(gè)方格（Child）的值，并且在每次方格被點(diǎn)擊的時(shí)候改變這個(gè)值。

首先，我們向這個(gè) class 中添加一個(gè)構(gòu)造函數(shù)，用來初始化 state：

在 JavaScript class 中，每次你定義其子類的構(gòu)造函數(shù)時(shí)，都需要調(diào)用 super 方法。因此，在所有含有構(gòu)造函數(shù)的的 React 組件中，構(gòu)造函數(shù)必須以 super(props) 開頭。

class Child extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: null,
+    };
+  }

  render() {
    return (
-      <button className="acceptValue" onClick={() => alert('click')}>
+      <button
+          className="acceptValue"
+          onClick={() => this.setState({value: 'X'})}
+      >
-        {this.props.value}
+        {this.state.value}
      </button>
    );
  }
}

class Father extends React.Component {
    renderChild(i) {
+        return <Child/>;
    }

    render() {
        return (
            <div>
                <div className="provideValue"> {this.renderChild(0)}</div>
            </div>
        );
    }
}

子組件的 state 數(shù)據(jù)提升至其共同的父組件當(dāng)中保存

當(dāng)你遇到需要同時(shí)獲取多個(gè)子組件數(shù)據(jù)，或者兩個(gè)組件之間需要相互通訊的情況時(shí)，需要把子組件的 state 數(shù)據(jù)提升至其共同的父組件當(dāng)中保存。之后父組件可以通過 props 將狀態(tài)數(shù)據(jù)傳遞到子組件當(dāng)中。這樣應(yīng)用當(dāng)中所有組件的狀態(tài)數(shù)據(jù)就能夠更方便地同步共享了。

class Child extends React.Component {
    render() {
        return (
+            <button
+                className="acceptValue"
+                onClick={() => this.props.onClick()}
+            >
                {this.props.value}
-               {this.state.value}
            </button>
        );
    }
}



class Father extends React.Component {
+    constructor(props) {
+        super(props);//在 JavaScript class 中，每次你定義其子類的構(gòu)造函數(shù)時(shí)，都需要調(diào)用 super 方法。因此，在所有含有構(gòu)造函數(shù)的的 React 組件中，構(gòu)造函數(shù)必須以 super(props) 開頭
+        this.state = {
+            values: Array(9).fill(null)
+        };
+    }

+    handleClick(i){
+        const values=this.state.values.slice();// .slice() 方法創(chuàng)建了 squares 數(shù)組的一個(gè)副本，而不是直接在現(xiàn)有的數(shù)組上進(jìn)行修改.簡(jiǎn)化復(fù)雜的功能-不直接在數(shù)據(jù)上修改可以讓我們追溯并復(fù)用游戲的歷史記錄;跟蹤數(shù)據(jù)的改變;確定在 React 中何時(shí)重新渲染
+        values[i]='X'
+        this.setState({values:values});
+    }

    renderChild(i) {
        return (
            <Child
+                value={this.state.values[i]}
+                onClick={() => this.handleClick(i)}
            />
        );
    }

    render() {
        return (
            <div>
                <div className="provideValue">
                    {this.renderChild(0)}
                </div>
            </div>
        );
    }
}

函數(shù)組件

如果你想寫的組件只包含一個(gè) render 方法，并且不包含 state，那么使用函數(shù)組件就會(huì)更簡(jiǎn)單。

我們不需要定義一個(gè)繼承于 React.Component 的類，我們可以定義一個(gè)函數(shù)，這個(gè)函數(shù)接收 props 作為參數(shù)，然后返回需要渲染的元素。函數(shù)組件寫起來并不像 class 組件那么繁瑣，很多組件都可以使用函數(shù)組件來寫。

function Child(props) {
  return (
    <button className="acceptValue" onClick={props.onClick}>
      {props.value}
    </button>
  );
}

注意
當(dāng)我們把 Square 修改成函數(shù)組件時(shí)，我們同時(shí)也把 onClick={() => this.props.onClick()} 改成了更短的 onClick={props.onClick}（注意兩側(cè)都沒有括號(hào)）。

向事件處理程序傳遞參數(shù)

在循環(huán)中，通常我們會(huì)為事件處理函數(shù)傳遞額外的參數(shù)。例如，若 id 是你要?jiǎng)h除那一行的 ID，以下兩種方式都可以向事件處理函數(shù)傳遞參數(shù)：

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

在這兩種情況下，React 的事件對(duì)象 e 會(huì)被作為第二個(gè)參數(shù)傳遞。如果通過箭頭函數(shù)的方式，事件對(duì)象必須顯式的進(jìn)行傳遞，而通過 bind 的方式，事件對(duì)象以及更多的參數(shù)將會(huì)被隱式的進(jìn)行傳遞。

與運(yùn)算符 &&

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
+      {unreadMessages.length > 0 &&
+        <h2>
+          You have {unreadMessages.length} unread messages.
+        </h2>
      }
    </div>
  );
}

const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
  <Mailbox unreadMessages={messages} />,
  document.getElementById('root')
);

在 JavaScript 中，true && expression 總是會(huì)返回 expression, 而 false && expression 總是會(huì)返回 false。

因此，如果條件是 true，&& 右側(cè)的元素就會(huì)被渲染，如果是 false，React 會(huì)忽略并跳過它。

三目運(yùn)算符

使用 JavaScript 中的三目運(yùn)算符 condition ? true : false。

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? (
        <LogoutButton onClick={this.handleLogoutClick} />
      ) : (
        <LoginButton onClick={this.handleLoginClick} />
      )}
    </div>
  );
}

就像在 JavaScript 中一樣，你可以根據(jù)團(tuán)隊(duì)的習(xí)慣來選擇可讀性更高的代碼風(fēng)格。需要注意的是，如果條件變得過于復(fù)雜，那你應(yīng)該考慮如何提取組件。

阻止組件渲染

在極少數(shù)情況下，你可能希望能隱藏組件，即使它已經(jīng)被其他組件渲染。若要完成此操作，你可以讓 render 方法直接返回 null，而不進(jìn)行任何渲染。

下面的示例中，<WarningBanner /> 會(huì)根據(jù) prop 中 warn 的值來進(jìn)行條件渲染。如果 warn 的值是 false，那么組件則不會(huì)渲染:

function WarningBanner(props) {
+  if (!props.warn) {
+    return null;
+  }

  return (
    <div className="warning">
      Warning!
    </div>
  );
}

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showWarning: true};
    this.handleToggleClick = this.handleToggleClick.bind(this);
  }

  handleToggleClick() {
    this.setState(state => ({
      showWarning: !state.showWarning
    }));
  }

  render() {
    return (
      <div>
+        <WarningBanner warn={this.state.showWarning} />
        <button onClick={this.handleToggleClick}>
          {this.state.showWarning ? 'Hide' : 'Show'}
        </button>
      </div>
    );
  }
}

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

key

當(dāng)元素沒有確定 id 的時(shí)候，萬不得已你可以使用元素索引 index 作為 key：

const todoItems = todos.map((todo, index) =>
  // Only do this if items have no stable IDs
  <li key={index}>
    {todo.text}
  </li>
);

如果列表項(xiàng)目的順序可能會(huì)變化，我們不建議使用索引來用作 key 值，因?yàn)檫@樣做會(huì)導(dǎo)致性能變差，還可能引起組件狀態(tài)的問題?？梢钥纯?Robin Pokorny 的深度解析使用索引作為 key 的負(fù)面影響這一篇文章。
如果你選擇不指定顯式的 key 值，那么 React 將默認(rèn)使用索引用作為列表項(xiàng)目的 key 值。

表單

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 'coconut'};

+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
+    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('你喜歡的風(fēng)味是: ' + this.state.value);
+    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          選擇你喜歡的風(fēng)味:
+          <select value={this.state.value} onChange={this.handleChange}>
            <option value="grapefruit">葡萄柚</option>
          </select>
        </label>

+        <input type="submit" value="提交" />
      </form>
    );
  }
}

\color{#f00}{!!!}你可以將數(shù)組傳遞到 value 屬性中，以支持在 select 標(biāo)簽中選擇多個(gè)選項(xiàng)：

<select multiple={true} value={['B', 'C']}>

注意點(diǎn)

  • 組件名稱必須以大寫字母開頭。
  • componentDidMount() 方法會(huì)在組件已經(jīng)被渲染到 DOM 中后運(yùn)行
  • 構(gòu)造函數(shù)是唯一可以給 this.state 賦值的地方,this.setState({});
  • 數(shù)據(jù)是向下流動(dòng)的, state 為局部的或是封裝的。除了擁有并設(shè)置了它的組件，其他組件都無法訪問,組件可以選擇把它的 state 作為 props 向下傳遞到它的子組件.這通常會(huì)被叫做“自上而下”或是“單向”的數(shù)據(jù)流。任何的 state 總是所屬于特定的組件，而且從該 state 派生的任何數(shù)據(jù)或 UI 只能影響樹中“低于”它們的組件
  • React 事件的命名采用小駝峰式（camelCase），而不是純小寫。
  • key 應(yīng)該在數(shù)組的上下文中被指定.在 map() 方法中的元素需要設(shè)置 key 屬性.key 只是在兄弟節(jié)點(diǎn)之間必須唯一
  • 如果你的組件中需要使用 key 屬性的值，請(qǐng)用其他屬性名顯式傳遞這個(gè)值.無法通過props讀出 props.key
  • JSX 允許在大括號(hào)中嵌入任何表達(dá)式
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容