Vue前端 · 初回顾React框架

回顾react已经忘掉的差不多了~ 时隔已久已经想不起来内部的业务逻辑和该如何编写代码了，于是又重刷了一下React官方文档~

重头看到尾之后一点点回顾react中的一些小小的知识点，以及使用内部关联使用的CodePen照着敲react中的核心概念和使用。

react核心概念 第12小节----React 哲学 简介是这么说的 ：
React最棒的部分之一是引导我们思考如何构建一个应用。在这篇文档中，我们将会通过 React 构建一个可搜索的产品数据表格来更深刻地领会 React哲学。

所以照着理解并在CodePen敲了一下以便于理解和使用！

设计初稿是这样的

完成后

下面展示所有代码

js

//最外层盒子组件
class FilterableProductTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text: "",
      checked: false
    };

    this.handleFilterTextChange = this.handleFilterTextChange.bind(this);
    this.handleInStockChange = this.handleInStockChange.bind(this);
  }

  handleFilterTextChange(text) {
    this.setState({
      text: text
    });
  }

  handleInStockChange(checked) {
    console.log(checked);
    this.setState({
      checked: checked
    });
  }

  render() {
    return (
      <div>
        <SearchBar
          text={this.state.text}
          checkeds={this.state.checked}
          onFilterTextChange={this.handleFilterTextChange}
          onInStockChange={this.handleInStockChange}
        />
        <ProductTable
          getList={this.props.getList}
          Text={this.state.text}
          checkeds={this.state.checked}
        />
      </div>
    );
  }
}

//头部search组件
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) {
    console.log(e.target.checked);
    this.props.onInStockChange(e.target.checked);
  }

  render() {
    const Texts = this.props.text;
    const Checkeds = this.props.checkeds;

    return (
      <form className="Search">
        <input
          className="text"
          type="text"
          placeholder="请输入您要查询的名称..."
          value={Texts}
          onChange={this.handleFilterTextChange}
        />
        <p>
          <input
            type="checkbox"
            checked={Checkeds}
            onChange={this.handleInStockChange}
          />
          {"只展示有库存产品"}
        </p>
      </form>
    );
  }
}

// 产品列表table组件
class ProductTable extends React.Component {
  render() {
    const Texts = this.props.Text;
    const Checkeds = this.props.checkeds;

    const rows = [];
    let lastCategory = null;

    this.props.getList.forEach((getList) => {
      if (getList.name.indexOf(Texts) === -1) {
        return;
      }
      if (Checkeds && !getList.stocked) {
        return;
      }
      if (getList.category !== lastCategory) {
        rows.push(
          <ProductCategoryRow
            category={getList.category}
            key={getList.category}
          />
        );
      }

      rows.push(<ProductRow getList={getList} key={getList.name} />);
      lastCategory = getList.category;
    });

    return (
      <table>
        <thead>
          <tr>
            <th>{"名称"}</th>
            <th>{"价格"}</th>
            <th>{"库存"}</th>
          </tr>
        </thead>
        <tbody>{rows}</tbody>
      </table>
    );
  }
}

// 列表产品类别栏组件
class ProductCategoryRow extends React.Component {
  render() {
    const category = this.props.category;
    return (
      <tr className="cate">
        <th colSpan="3" className="cate">
          {category}
        </th>
      </tr>
    );
  }
}

// 列表中的每一行的产品内容<tr>组件
class ProductRow extends React.Component {
  render() {
    const getList = this.props.getList;
    const name = getList.stocked ? (
      getList.name
    ) : (
      <span style={{ color: "#fb7373" }}>{getList.name}</span>
    );

    return (
      <tr>
        <td>{name}</td>
        <td>
          {getList.stocked ? (
           getList.price
          ) : (
            <span style={{ color: "#fb7373" }}>{getList.price}</span>
          )}
        </td>
        <td>
          {getList.stocked ? (
            "有"
          ) : (
            <span style={{ color: "#fb7373" }}>{"无"}</span>
          )}
        </td>
      </tr>
    );
  }
}

// 数据json
const GetList = [
  {
    category: "体育用品",
    price: "$ 49 元",
    stocked: true,
    name: "足球"
  },
  {
    category: "体育用品",
    price: "$ 55 元",
    stocked: true,
    name: "篮球"
  },
  {
    category: "体育用品",
    price: "$ 29 元",
    stocked: false,
    name: "排球"
  },
  {
    category: "体育用品",
    price: "$ 29 元",
    stocked: true,
    name: "乒乓球"
  },
  {
    category: "体育用品",
    price: "$ 9 元",
    stocked: false,
    name: "羽毛球"
  },
  {
    category: "电子产品",
    price: "$ 899 元",
    stocked: false,
    name: "手机"
  },
  {
    category: "电子产品",
    price: "$ 99 元",
    stocked: true,
    name: "iPod平板"
  },

  {
    category: "电子产品",
    price: "$ 4899 元",
    stocked: true,
    name: "电脑"
  },
  {
    category: "电子产品",
    price: "$ 3899 元",
    stocked: true,
    name: "iPhone 13"
  },
  {
    category: "电子产品",
    price: "$ 4799 元",
    stocked: false,
    name: "华为电脑"
  }
];

// 渲染最外层组件<FilterableProductTable getList={GetList} />并传递json参数到Id为container的dom中
ReactDOM.render(
  <FilterableProductTable getList={GetList} />,
  document.getElementById("container")
);

一定不要忘了在HTML中添加这个ID为 container的div哦! (那是它要render渲染的地方)

好啦~ 这只是了解了一点点React的基础，Vue转React原来是这样的，还是要多多学习呀，学无止境…