為了使你的UI具有交互性，需要能夠觸發(fā)對(duì)基礎(chǔ)數(shù)據(jù)模型的更改。 React使用state讓這一切變得簡(jiǎn)單。要正確構(gòu)建應(yīng)用程序，首先需要考慮應(yīng)用程序需要的最小可變狀態(tài)集。這里的關(guān)鍵是：不要重復(fù)自己。找出應(yīng)用程序需要的狀態(tài)的絕對(duì)最小表示，并計(jì)算需要的其他所有內(nèi)容。例如，如果你正在創(chuàng)建一個(gè)TODO列表，只需要保存一個(gè)TODO項(xiàng)目的數(shù)組;不要為計(jì)數(shù)保留一個(gè)多帶帶的狀態(tài)變量。相反，當(dāng)你要渲染TODO數(shù)量時(shí)，只需取TODO項(xiàng)目數(shù)組的長(zhǎng)度即可。

考慮我們示例應(yīng)用程序中的所有數(shù)據(jù)。我們有：

產(chǎn)品的原始列表

用戶輸入的搜索文本

復(fù)選框的值

過(guò)濾的產(chǎn)品列表

我們來(lái)看看每一個(gè)是哪一個(gè)state。這里有關(guān)于每條數(shù)據(jù)的三個(gè)問(wèn)題：

是通過(guò)props從父組件傳入的嗎？如果是，那可能不是state。

它是否保持不變？如果是，那可能不是state。

你能基于組件中的任何其他state或props來(lái)計(jì)算它嗎？如果是，那不是state。

原來(lái)的產(chǎn)品清單是作為props傳入的，所以這不是state。搜索文本和復(fù)選框似乎是state，因?yàn)樗鼈冸S著時(shí)間而改變，不能從任何東西計(jì)算。最后，產(chǎn)品的過(guò)濾列表不是state，因?yàn)樗梢酝ㄟ^(guò)將產(chǎn)品的原始列表與復(fù)選框的搜索文本和值組合來(lái)計(jì)算得到。

所以最后，我們的states是：

用戶輸入的搜索文本

復(fù)選框的值

class ProductCategoryRow extends React.Component {
  render() {
    const category = this.props.category;
    return (
      
        
          {category}
        
      
    );
  }
}

class ProductRow extends React.Component {
  render() {
    const product = this.props.product;
    const name = product.stocked ?
      product.name :
      
        {product.name}
      ;

    return (
      
        {name}
        {product.price}
      
    );
  }
}

class ProductTable extends React.Component {
  render() {
    const filterText = this.props.filterText;
    const inStockOnly = this.props.inStockOnly;

    const rows = [];
    let lastCategory = null;

    this.props.products.forEach((product) => {
      if (product.name.indexOf(filterText) === -1) {
        return;
      }
      if (inStockOnly && !product.stocked) {
        return;
      }
      if (product.category !== lastCategory) {
        rows.push(
          
        );
      }
      rows.push(
        
      );
      lastCategory = product.category;
    });

    return (
      {rows}

        

          

            
Name
            
Price
          
        
        

      
    );
  }
}

class SearchBar extends React.Component {
  render() {
    const filterText = this.props.filterText;
    const inStockOnly = this.props.inStockOnly;

    return (
      

        
        

          
          {" "}
          Only show products in stock
        
      
    );
  }
}

class FilterableProductTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      filterText: "",
      inStockOnly: false
    };
  }

  render() {
    return (
      

        
        
      
    );
  }
}


const PRODUCTS = [
  {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
  {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
  {category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
  {category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
  {category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
  {category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
];

ReactDOM.render(
  ,
  document.getElementById("container")
);

現(xiàn)在我們已經(jīng)確定了最小的一組應(yīng)用程序state。接下來(lái)，我們需要確定哪個(gè)組件會(huì)改變或擁有這個(gè)state。

請(qǐng)記?。簲?shù)據(jù)在React的組件層次結(jié)構(gòu)中是單向流動(dòng)的。它可能不清楚哪個(gè)組件應(yīng)該擁有什么狀態(tài)。這通常是新手理解的最具挑戰(zhàn)性的部分，所以請(qǐng)按照以下步驟解決：

對(duì)于你的應(yīng)用程序中的每一個(gè)state：

確定基于該state渲染某些內(nèi)容的每個(gè)組件。

找到一個(gè)共同的擁有者組件（一個(gè)在所有需要該state的層次結(jié)構(gòu)組件之上的組件）。

無(wú)論是共同所有者，還是高層次的其他組成部分，都應(yīng)該擁有這個(gè)state。

如果你無(wú)法找到一個(gè)有意義的組件，那么只好創(chuàng)建一個(gè)新的組件來(lái)保存state，并將其添加到公共所有者組件上方的層次結(jié)構(gòu)中的某個(gè)位置。

讓我們來(lái)看看我們的應(yīng)用程序的這個(gè)策略：

ProductTable需要根據(jù)狀態(tài)過(guò)濾產(chǎn)品列表，而SearchBar需要顯示搜索文本和檢查狀態(tài)。

通用所有者組件是FilterableProductTable。

從概念上講，過(guò)濾器文本和選中的值存在于FilterableProductTable中是有意義的

酷，所以我們已經(jīng)決定，我們的state存活在FilterableProductTable中。首先，將一個(gè)實(shí)例屬性this.state = {filterText：""，inStockOnly：false}添加到FilterableProductTable的構(gòu)造函數(shù)中，以反映應(yīng)用程序的初始狀態(tài)。然后，將filterText和inStockOnly作為prop傳遞給ProductTable和SearchBar。最后，使用這些props來(lái)篩選ProductTable中的行，并在SearchBar中設(shè)置表單域的值。

你可以看到你的應(yīng)用程序的行為了：設(shè)置filterText為“ball”，并刷新你的應(yīng)用程序。你將看到數(shù)據(jù)表已正確更新。

class ProductCategoryRow extends React.Component {
  render() {
    const category = this.props.category;
    return (
      
        
          {category}
        
      
    );
  }
}

class ProductRow extends React.Component {
  render() {
    const product = this.props.product;
    const name = product.stocked ?
      product.name :
      
        {product.name}
      ;

    return (
      
        {name}
        {product.price}
      
    );
  }
}

class ProductTable extends React.Component {
  render() {
    const filterText = this.props.filterText;
    const inStockOnly = this.props.inStockOnly;

    const rows = [];
    let lastCategory = null;

    this.props.products.forEach((product) => {
      if (product.name.indexOf(filterText) === -1) {
        return;
      }
      if (inStockOnly && !product.stocked) {
        return;
      }
      if (product.category !== lastCategory) {
        rows.push(
          
        );
      }
      rows.push(
        
      );
      lastCategory = product.category;
    });

    return (
      {rows}

        

          

            
Name
            
Price
          
        
        

      
    );
  }
}

class SearchBar extends React.Component {
  constructor(props) {
    super(props);
    this.handleFilterTextChange = this.handleFilterTextChange.bind(this);
    this.handleInStockChange = this.handleInStockChange.bind(this);
  }
  
  handleFilterTextChange(e) {
    this.props.onFilterTextChange(e.target.value);
  }
  
  handleInStockChange(e) {
    this.props.onInStockChange(e.target.checked);
  }
  
  render() {
    return (
      

        
        

          
          {" "}
          Only show products in stock
        
      
    );
  }
}

class FilterableProductTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      filterText: "",
      inStockOnly: false
    };
    
    this.handleFilterTextChange = this.handleFilterTextChange.bind(this);
    this.handleInStockChange = this.handleInStockChange.bind(this);
  }

  handleFilterTextChange(filterText) {
    this.setState({
      filterText: filterText
    });
  }
  
  handleInStockChange(inStockOnly) {
    this.setState({
      inStockOnly: inStockOnly
    })
  }

  render() {
    return (
      

        
        
      
    );
  }
}


const PRODUCTS = [
  {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
  {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
  {category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
  {category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
  {category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
  {category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
];

ReactDOM.render(
  ,
  document.getElementById("container")
);

到目前為止，我們已經(jīng)構(gòu)建了一個(gè)應(yīng)用程序，可以根據(jù)props和state正確地呈現(xiàn)在層次結(jié)構(gòu)中。現(xiàn)在是時(shí)候以另一種方式支持?jǐn)?shù)據(jù)流：深層次的表單組件需要更新FilterableProductTable中的狀態(tài)。

React使這個(gè)數(shù)據(jù)流清晰易懂，以便理解你的程序是如何工作的，但是它需要比傳統(tǒng)的雙向數(shù)據(jù)綁定更多的輸入。

如果你嘗試在當(dāng)前版本的示例中鍵入或選中該框，則會(huì)看到React忽略了你的輸入。這是故意的，因?yàn)槲覀円呀?jīng)將輸入的值prop設(shè)置為始終等于從FilterableProductTable傳入的state。

讓我們想想我們想要發(fā)生的事情。我們希望確保每當(dāng)用戶更改表單時(shí)，我們都會(huì)更新?tīng)顟B(tài)以反映用戶的輸入。由于組件應(yīng)該只更新自己的state，只要state需要更新時(shí)，FilterableProductTable就會(huì)傳遞回調(diào)到SearchBar。我們可以使用輸入上的onChange事件來(lái)通知它。 FilterableProductTable傳遞的回調(diào)將調(diào)用setState（），并且應(yīng)用程序?qū)⒈桓隆?/p>

雖然這聽(tīng)起來(lái)很復(fù)雜，但實(shí)際上只是幾行代碼。你的數(shù)據(jù)如何在整個(gè)應(yīng)用程序中流動(dòng)變得非常明確。

希望這篇文章可以讓你了解如何用React來(lái)構(gòu)建組件和應(yīng)用程序。雖然它可能比以前多一些代碼，但請(qǐng)記住，代碼的讀遠(yuǎn)遠(yuǎn)超過(guò)它的寫(xiě)，并且讀取這個(gè)模塊化的顯式代碼非常容易。當(dāng)你開(kāi)始構(gòu)建大型組件庫(kù)時(shí)，你將會(huì)體會(huì)到這種明確性和模塊性，并且通過(guò)代碼重用，你的代碼行將開(kāi)始縮小。

文中所有示例的HTML和CSS內(nèi)容如下：

body {
  padding: 5px
}