React学习02

一、单项数据流

在react中，数据传递是单项的，传递后不能更改
比如：

        <ul>
          {this.state.list.map((item, index) => {
            return (
              <AnimalItem
                key={item + index}
                Component={item}
                index={index}
                deleteItem={this.deleteItem.bind(this)}
                list = {this.state.list}//把父组件state中的值传过去是没有问题的
              />
            );
          })}
        </ul>

handClick() {
    this.props.deleteItem(this.props.index);
    {/* this.props.list = []; //改变父组件的值是不允许的*/}
  }
}

函数编程意思是：每一个函数代表一个功能

函数式编程的好处是什么？

函数式编程让我们的代码更清晰，每个功能都是一个函数。
函数式编程为我们的代码测试代理了极大的方便，更容易实现前端自动化测试。
React框架也是函数式编程，所以说优势在大型多人开发的项目中会更加明显，让配合和交流都得心应手。

二、PropTypes校验

引入

import PropTypes from "prop-types";

校验内容（写在类外）

class AnimalItem extends Component {...}

AnimalItem.propTypes = {
  //校验内容
  content: PropTypes.string,
  index: PropTypes.number,
  deleteItem: PropTypes.func,
};

三、ref的使用

ref是一个语义化工具

ref={(input) => {
              this.input = input;
            }}

四、React的生命周期

React声明周期的四个大阶段：

1. Initialization:初始化阶段。
2. Mounting: 挂在阶段。
3. Updation: 更新阶段。
4. Unmounting: 销毁阶段。

生命周期函数指在某一个时刻组件会自动调用执行的函数

Mounting阶段：

• componentWillMount : 在组件即将被挂载到页面的时刻执行。
• render : 页面state或props发生变化时执行。
• componentDidMount : 组件挂载完成时被执行。

注意：componentWillMount 和 componentDidMount 只在页面刷新执行一遍，而render 会在state和props发生变化时执行

Updation阶段:

• shouldComponentUpdate：在组件更新之前，自动被执行。他会返回一个布尔值，这个值表示是否允许组件更新。true表示允许，false表示不允许。
  （shouldComponentUpdate有两个参数：nextProps:变化后的属性;nextState:变化后的状态;）

• componentWillUpdate：在组件更新之前，但在shouldComponenUpdate之后被执行。但是如果shouldComponentUpdate返回false，这个函数就不会被执行了。

• componentDidUpdate在组件更新之后执行。

• componentWillReceiveProps：子组件接收到父组件传递过来的参数，父组件render函数重新被执行，这个生命周期就会被执行。（ 也就是说这个组件第一次存在于Dom中，函数是不会被执行的;如果已经存在于Dom中，函数才会被执行。）

Unmounting阶段
componentWillUnmount在组件去除的时候执行

五、axioss数据请求

引入axios

import axios from 'axios'

接收数据

componentDidMount(){
    axios.post('https://web-api.juejin.im/v3/web/wbbr/bgeda')
        .then((res)=>{console.log('axios 获取数据成功:'+JSON.stringify(res))  })
        .catch((error)=>{console.log('axios 获取数据失败'+error)})
}

建议在componentDidMount中请求数据