Question

我是使用React开发的初学者。我通过Facebook文档了解到。我练习＆＃34;思考反应＆＃34;例如(go to it)。但我试图通过使用除功能之外的任何东西来改变解决方案。结果如下：

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

效果不错但是：

我可以继续这样吗？
有没有方法以更好的方式刷新de document，从树的根重新渲染？

任何其他评论将不胜感激

Answer 1

您正在实施中使用功能组件。这些可以用于＆＃39;无状态＆＃39; 组件。但是，如果某个组件的属性会更改（例如搜索栏中的文本），那么您将需要使用React state来处理这些更改。对组件的状态和 props 的更改是React智能管理重新呈现/刷新的两种主要方式。

没有必要重新实现refresh()函数，因为React的强大功能来自于它能够根据更改自动处理重新渲染到状态我们的组件。

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

Answer 2

感谢您提供的信息。我播放了视频“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**.

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

确实我不愿意深入到Class（那不是真正的类！）组件，状态（那个缝很难正确定义）以及所有构造函数，超级，道具，这个，生命周期.......携带所有这些。支持。和this.state。符号....

当然我会遇到一些情况，如果是强制性的，但我会非常乐意尽可能地延迟这个!!!

反应：只使用功能吗？

2 个答案: