初识react

tips：

最近开始学习 React，新手教程最后，有一个官方示例：React 哲学，以下是自行实现的代码，无样式：

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
  
class ProductRow extends React.Component {
    render() {
      return (
        <div>
            <span>{this.props.value.name}</span>
            <span>{this.props.value.price}</span>
        </div>
      );
    }
  }
  class ProductCategoryRow extends React.Component {
    render() {
      return (
          <div>
              <div>
                <span>Name</span>
                <span>Price</span>
              </div>
              <div>
                  {this.props.category}
              </div>
              {this.props.value.filter(obj=>obj.category === this.props.category).map(item=>(
                    <ProductRow key={item.name} value={item}/>))
                }
          </div>
      );
    }
  }

  class ProductTable extends React.Component {
    render() {
      return (
          <div>
              <ProductCategoryRow value={this.props.value} category='Sporting Goods'/>
              <ProductCategoryRow value={this.props.value} category='Electronics'/>
          </div>
      );
    }
  }


  class SearchBar extends React.Component {
      handleChange = (e) => {
          console.log('触发input 的 onchange')
          this.props.onChange(e.target.value)
      }
      handleChangeCBox = (e) => {
          console.log('触发 checkbox 的 onchange')
          this.props.onChangeCBox(!!e.target.checked)
    }
      render() {
      return (
          <div>
              <input value={this.props.value} onChange={this.handleChange}></input>
              <div>
                <label>
                    <input type='checkbox' 
                    checked={this.props.checked?'checked':''} 
                    onChange={this.handleChangeCBox}
                    >
                    </input>
                </label>
                <span>only show products in stock</span>
              </div>
          </div>
      );
    }
  }


  class FilterableProductTable extends React.Component {
      constructor(props) {
          super(props)
          this.state = {filterText: '', inStockOnly: false}
          this.handleChange = this.handleChange.bind(this);
          this.handleChangeCBox = this.handleChangeCBox.bind(this);
      }
      handleChange(value) {
        console.log('value', value)
        this.setState({filterText: value});
      }
      handleChangeCBox(value) {
          console.log('value', value)
        this.setState({inStockOnly: value});
      }
    render() {
        const jsonString = [
            {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"}
          ];
          let filterdArray = []
          if(this.state.filterText === ''){
            filterdArray = jsonString
          }else{
            filterdArray = jsonString.filter(obj=>obj.name.indexOf(this.state.filterText)!==-1)
          }
          if(this.state.inStockOnly){
            filterdArray = filterdArray.filter(obj=>obj.stocked===this.state.inStockOnly)
          }
          
          return (
          <div>
              <SearchBar 
              value={this.state.filterText} 
              checked={this.state.inStockOnly} 
              onChange={this.handleChange}
              onChangeCBox={this.handleChangeCBox}
              />
              <ProductTable value={filterdArray}/>
          </div>
      );
    }
  }


  // ========================================
  
  ReactDOM.render(
    <FilterableProductTable />,
    document.getElementById('root')
  );
  

 

知识点：

 

jsx　　

JavaScript 的语法扩展

 

ReactDOM.render(element,dom)　　

将一个 React 元素渲染/更新到 DOM 节点

 

class组件　　

如果有组件生命周期控制需求，需要使用class组件

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
  }

  componentWillUnmount() {
  }

  render() {
    return (
      <div>
        your dom
      </div>
    );
  }
}

 

props & state　　

简单理解，props是父组件传入属性，state是组件内部属性

 

事件　　

命名接近js原生语法，但是为小驼峰  onclick => onClick

 

列表渲染

（对应vue 的 v-for）

map() 方法，需要有key