Function 反应：只使用函数？

我是React开发的初学者。我是通过Facebook文档学习的。我以“反应中思考”为例进行练习。但我试图通过只使用函数来改变解决方案。 结果如下：

function ProductCategoryRow({category, key}) {
    return <tr><th colSpan="2">{category}</th></tr>  ;
}

function ProductRow({product, key}) {
    var name = product.stocked ? product.name :
      <span style={{color: 'red'}}>
        {product.name}
      </span>;   
    return (
      <tr>
        <td>{name}</td>
        <td>{product.price}</td>
      </tr>
    );
  }

function ProductTable({products, filterText, inStockOnly}) {
    var rows = [];
    var lastCategory = null;
      products.forEach((product) => {
        if (product.name.indexOf(filterText) === -1 || (!product.stocked && inStockOnly)) {

          return;
        }
       if (product.category !== lastCategory) {
          rows.push(<ProductCategoryRow category={product.category} key={product.category} />);
        }
        rows.push(<ProductRow product={product} key={product.name} />);
        lastCategory = product.category;
        });
    return (
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Price</th>
          </tr>
        </thead>
        <tbody>{rows}</tbody>
      </table>
    );
}

function handleFilterTextInput(event) { filterText = event.target.value; refresh() }

function handleInStockInput(e) { inStockOnly = e.target.checked; refresh()}

function SearchBar({filterText, inStockOnly, onFilterTextInput, onInStockInput}) {
    return (
      <form>
        <input
          type="text"
          placeholder="Search..."
          value={filterText}
          onChange={onFilterTextInput}
        />
        <p>
          <input
            type="checkbox"
            checked={inStockOnly}
            onChange={onInStockInput}
          />
          {' '}
          Only show products in stock
        </p>
      </form>
    );
  }

var filterText = "";

var inStockOnly = false;

function FilterableProductTable({products}) {
    return (
      <div>
        <SearchBar
          filterText={filterText}
          inStockOnly={inStockOnly}
          onFilterTextInput={handleFilterTextInput}
          onInStockInput={handleInStockInput}
        />
        <ProductTable
          products={PRODUCTS}
          filterText={filterText}
          inStockOnly={inStockOnly}
        />
      </div>
    );
  }


var 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'}
];

function refresh() {
  ReactDOM.render(
    <FilterableProductTable products={PRODUCTS} />,
    document.getElementById('container')
  );
}

refresh();

函数ProductCategoryRow（{category，key}）{
返回{category}；
}
函数ProductRow（{product，key}）{
var名称=product.stocked？product.name：
{product.name}
;   
返回(
{name}
{产品价格}
);
}
函数ProductTable（{products，filterText，inStockOnly}）{
var行=[]；
var lastCategory=null；
products.forEach（（产品）=>{
if（product.name.indexOf（filterText）==-1 | |（！product.stocked&&inStockOnly））{
返回；
}
if（product.category！==lastCategory）{
rows.push（）；
}
rows.push（）；
lastCategory=product.category；
});
返回(
名称
价格
{rows}
);
}
函数handlefiltertextput（事件）{filterText=event.target.value；refresh（）}
函数handleInStockInput（e）{inStockOnly=e.target.checked；refresh（）}
函数搜索栏（{filterText，inStockOnly，onFilterTextInput，onInStockInput}）{
返回(

{' '}
只展示库存产品

);
}
var filterText=“”；
var inStockOnly=false；
函数FilterableProductTable（{products}）{
返回(
);
}
var乘积=[
{类别：'体育用品'，价格：'$49.99'，库存：真实，名称：'足球'}，
{类别：'体育用品'，价格：'$9.99'，库存：真实，名称：'棒球'}，
{类别：'体育用品'，价格：'$29.99'，库存：假，名称：'篮球'}，
{类别：'Electronics'，价格：'99.99美元'，库存：真实，名称：'iPod Touch'}，
{类别：'Electronics'，价格：'399.99美元'，库存：假，名称：'iphone5'}，
{类别：'Electronics'，价格：'$199.99'，库存：true，名称：'Nexus 7'}
];
函数刷新（）{
ReactDOM.render(
,
document.getElementById（'容器'）
);
}
刷新（）；

它运行良好，但：

• 我可以走这条路吗
• 是否有任何方法可以以更好的方式刷新de文档，从树的根重新渲染

---

如果您在实现中使用了功能组件，我们将不胜感激。这些可以用于无状态组件。但是，如果组件的属性将发生更改，例如搜索栏中的文本，则需要使用来处理这些更改。组件的状态和道具的更改是智能地管理重新渲染/刷新的两种主要反应方式

无需重新实现

refresh（）

函数，因为React的强大功能来自于它能够根据组件的状态更改自动处理重新渲染

---

希望这些信息能有所帮助。我建议观看视频并了解React做了什么以及开发人员使用它的原因

您在实现中使用的是功能组件。这些可以用于无状态组件。但是，如果组件的属性将发生更改，例如搜索栏中的文本，则需要使用来处理这些更改。组件的状态和道具的更改是智能地管理重新渲染/刷新的两种主要反应方式

无需重新实现

refresh（）

函数，因为React的强大功能来自于它能够根据组件的状态更改自动处理重新渲染

---

希望这些信息能有所帮助。我建议您观看视频，并了解React做了什么以及开发者为什么使用它

感谢您提供的信息。 我播放了“反应介绍”视频。这对我很有用。 但是当我看到Facebook的文档说：

ReactDOM.render() controls the contents of the container node you pass 
in. Any existing DOM elements inside are replaced when first called. 
**Later calls use React’s DOM diffing algorithm for efficient 
updates**.

我想知道为什么我不能继续我的“刷新”方法

事实上，我不愿意深入研究类（不是真正的类！）组件、状态（seam很难正确定义）和所有构造函数、超级、道具、这个、生命周期。。。。。。。带着所有这些道具。还有这个州。符号

---

当然，我会遇到一些情况，如果这是强制性的，但我会非常高兴地推迟这一点尽可能多

谢谢你提供的信息。 我播放了“反应介绍”视频。这对我很有用。 但是当我看到Facebook的文档说：

ReactDOM.render() controls the contents of the container node you pass 
in. Any existing DOM elements inside are replaced when first called. 
**Later calls use React’s DOM diffing algorithm for efficient 
updates**.

我想知道为什么我不能继续我的“刷新”方法

事实上，我不愿意深入研究类（不是真正的类！）组件、状态（seam很难正确定义）和所有构造函数、超级、道具、这个、生命周期。。。。。。。带着所有这些道具。还有这个州。符号

---

当然，我会遇到一些情况，如果这是强制性的，但我会非常高兴地推迟这一点尽可能多

您可以继续使用此方法-但是，您错过了React的性能胜利！当您开始学习时，React中的各种概念可能会非常吓人——但它们存在是有原因的！React智能地管理对组件的更改（通过

状态

和

道具

）并仅更新已更改的部分，而不是刷新整个应用程序！您的

refresh（）

函数正在重新呈现整个应用程序，一旦您的