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

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

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

用戶輸入的搜索文本

復(fù)選框的值

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

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

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

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

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

原來的產(chǎn)品清單是作為props傳入的，所以這不是state。搜索文本和復(fù)選框似乎是state，因為它們隨著時間而改變，不能從任何東西計算。最后，產(chǎn)品的過濾列表不是state，因為它可以通過將產(chǎn)品的原始列表與復(fù)選框的搜索文本和值組合來計算得到。

所以最后，我們的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。接下來，我們需要確定哪個組件會改變或擁有這個state。

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

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

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

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

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

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

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

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

通用所有者組件是FilterableProductTable。

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

酷，所以我們已經(jīng)決定，我們的state存活在FilterableProductTable中。首先，將一個實例屬性this.state = {filterText：""，inStockOnly：false}添加到FilterableProductTable的構(gòu)造函數(shù)中，以反映應(yīng)用程序的初始狀態(tài)。然后，將filterText和inStockOnly作為prop傳遞給ProductTable和SearchBar。最后，使用這些props來篩選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)建了一個應(yīng)用程序，可以根據(jù)props和state正確地呈現(xiàn)在層次結(jié)構(gòu)中?，F(xiàn)在是時候以另一種方式支持?jǐn)?shù)據(jù)流：深層次的表單組件需要更新FilterableProductTable中的狀態(tài)。

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

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

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

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

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

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

body {
  padding: 5px
}