react 项目总结

1、 react生命周期

componentWillMount 在渲染前调用,在客户端也在服务端。

componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。

componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。

shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 
可以在你确认不需要更新组件时使用。

componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。

componentWillUnmount在组件从 DOM 中移除之前立刻被调用。

2、组件化

把一个页面拆分成几小快 然后所有代码在父组件里面执行

11.PNG

3、公共组件

Common 公共组件 相当于vue的app.js

22.PNG

底部高亮

第一步:给每个页面的底部一个类 注意是在每个页面父组件里面

 <Footer PageFooter="shopping" /> 购物车
 <Footer PageFooter="index" /> 首页
 <Footer PageFooter="my" /> 我的
 <Footer PageFooter="classify" /> 分类

Common 组件里面接收

 let { PageFooter } = this.props;   Common 组件里面接收  相当于父子传参
三目运算符   active   gray   less里面的样式
  <Link to='/index' className={PageFooter === 'index' ? active : gray}>

实现分类\在父组件里面获取分类列表和分类侧边栏的数据/

然后用子传父的方式传参

第一步

    this.state用来储存数据
    this.state = {
      侧边栏数据
      classify: [],
      全部数据
      flowers: [],
      获取分类的数据
      flowersList: []
    }
  } 
  渲染生命周期
  componentDidMount() {
    this.getData();
    this.getList()
  }
  渲染列表数据
  async getData() {
    let url = "/flower/getList"
    let res = await $http.get(url)
    this.setState({   this.setState用来修改数据
      flowers: res.flowers,
    })
  }
  侧边栏数据
  async getList() {
    let url = "/flower/getClassify"
    let res = await $http.get(url)
    this.setState({    this.setState用来修改数据
      classify: res.classify
    })
  }
      父子传参
<Sidebar classify={classify} /> 
<List flowers={flowersList}/>  全部的数据等于分类的数据

第二步子父传参

 this.getSidebar = this.getSidebar.bind(this)绑定点击事件
                              getSidebar是子父传参
<Sidebar classify={classify} getSidebar={this.getSidebar} />
<List flowers={flowersList}/>

onClick={() => { getSidebar(item.classify) } } 点击事件传参 把classify的所有数据传过去

  getSidebar(index) {  用index接收点击当前数据的下标
    let { flowers } = this.state   所有数据
    let list = flowers.filter(item => {
      return item.classify === index
    } 
    this.setState({
      flowersList: list       声明一个分类的数据等于list 
    })
  }

显示图片方式

（1）import 方法：
import logos from '../../assets/images/logos.png';//src/assets
render() {
        return (
            <img alt="logo" src={logos} />
        )
    }

（2）require方法
<img alt="limages" src={require('../../assets/images/logos.png')}  />