React学习笔记（Chapter4）

四、React进阶

4.2 PropTypes和DefaultProps的应用

1. PropTypes应用

//给TodoItem里接收的属性设置强校验
	TodoItem.propTypes = {
        content: PropTypes.string.isRequired,//content是一个字符串且父组件必须向子组件传递content
        deleteItem: PropTypes.func,//deleteItem是一个函数
        index: PropTypes.number//index是一个number
    }

补充：
从父组件接收的属性必须为数组内的任意符合条件的类型:

oneOfType[类型1，类型2，…]

从父组件接收的属性必须为数组类型，且数组内元素的类型需符合括号内条件：

arrayOf[类型，类型，…]

2. DefaultProps应用

//给test设置默认值的方法
	TodoItem.defaultProps = {
        test: 'hello world'
    }

4.3 props，state，render（）的关系

1. 当一个组件的state或者props发生改变的时候，render函数就会重新执行。
2. 当父组件的render函数被运行时，它的子组件的render都将被重新运行，原因是父组件包含子组件，父组件被运行渲染时，子组件也同时被运行渲染。

4.4~4.6 React中的虚拟DOM

介绍：

一、什么是虚拟DOM，为什么要用虚拟DOM

1. 虚拟DOM其实是一种JS对象。
2. 在JS里比较JS对象不怎么消耗性能，如果比较真实DOM则会非常耗性能。

二、深入了解虚拟DOM

React数据视图更新原理：

1. state数据
2. JSX模板
3. 数据 + 模板 生成虚拟DOM（虚拟DOM就是一个JS对象，用它来描述真实DOM）（损耗了性能）
   [‘div’, {id: ‘abc’}, [‘span’, {}, ‘hello world’]]
4. 用虚拟DOM的结构生成真实的DOM，来显示：

	<div id='abc'><span>hello world</span></div>

5. state发生变化
6. 数据 + 模板 生成新的虚拟DOM（极大的提升了性能）
   [‘div’, {id: ‘abc’}, [‘span’, {}, ‘bye bye’]]
7. 比较原始虚拟DOM和新的虚拟DOM的区别，找到区别是span中的内容（极大的提升了性能）
8. 直接操作DOM，改变span中的内容

优点：

1. 性能提升了。
2. 它使得跨端应用得以实现。React Native，安卓，苹果，网页。

三、虚拟DOM中的Diff算法
（这部分以后学习再补齐）

4.7 React中ref的使用

介绍：

1. ref帮助我们在react中直接获取DOM元素，一般情况下不使用它，有时候在做极其复杂的动画的时候要用ref。
2. 但在实际使用ref，setstate一起用的时候，DOM获取不及时。原因是setstate是异步的，如果你期望页面更新后获取DOM，一定记得把获取DOM的语法放在setstate第二个参数的函数里，它是一个回调函数。
   

4.8 React的生命周期函数

介绍：

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

render是生命周期函数，它在组件被创建时调用。
constructor也是（在组件被调用时先被自动运行），但它不是react特有的，一般不归到生命周期函数里。

componentWillMount：在组件即将被挂载到页面的时刻立即执行
componentDidMount：在组件即将被挂载到页面之后，自动被执行
shouldComponentUpdate：组件被更新之前，它会自动被执行
componentWillUpdate：组件被更新之前，它会自动执行，但是他在shoudComponentUpdate之后会进行选择。如果shouldComponentUpdate返回true它才执行；如果返回false，这个函数就不会被执行。
componentWillReceiveProps： 一个组建要从父组件接收参数，此时，只要父组件的render函数被重新执行了，子组件的这个生命周期函数就会被执行。（如果这个组件第一次存在于父组件中，不会执行；如果这个组件之前已经存在于父组件中，才会执行）
componentWillUnmount：当这个组件即将被从页面中剔除的时候，会被执行。

4.9 React的生命周期函数的使用场景

介绍：

组件中的render必要的，因为除了它，其他的生命周期函数在继承对象Component中都自带了。

1. 避免一个组件做无谓的render操作（提升性能）:

//例子：只有content改变了，才需要重新渲染该组件
shouldComponentUpdate(nextProps, nextState, nextContext) {
 if(nextProps.content !== this.props.content) {
         return true;
     }else{
         return false;
     }
 }

2. ajax请求只需要运行一次，一般放在componentDidMount里。（constructor，和componentWillMount也可以，但是推荐放componentDidMount里）

componentDidMount() {
      axios.get('api/my_pro1')
          .then(()=>{alert('success')})
          .catch(()=>{alert('error')})
  }

因为没有设置api，ajax访问失败会提示error，并且在底部显示网络404错误（F12->network标签），如下图所示：

4.10 使用Charles实现本地数据mock

介绍：

（继续前一节内容）
由于前端开发独立于后端，具体测试数据的实现需要借助Charles工具，下载网址。
需要在Charles里设置以模拟后端数据，因为没有做后端，故用本地数据代替。

实现：

最终实现本地数据模拟，效果如下：
代码：

componentDidMount() {  //生命周期函数
        axios.get('api/todolist')  //获取阿贾克斯请求
            .then((res) => {
                this.setState(() => ({
                    list: res.data
                }));
            })
            .catch(()=>{alert('error')})
    }

4.11 React中实现CSS过渡动画

目标：

点击“toggle”按钮后，hello文字在一秒内渐变显示/隐藏。

效果如下图所示：

实现：

JS文件（片段）：

//App.js->render()->Fragement
<div className={this.state.show ? 'show':'hide'}>hello</div>

样式文件：

//style.css
.show{
 opacity: 1;   
 transition: all 1s ease-in;
}

.hide{
 opacity: 0;
 transition: all 1s ease-in;
}

样式解释:

属性/值	效果
opacity	设置 div 元素的不透明级别
transition	设置过渡效果
（值）ease-in	规定以慢速开始的过渡效果

4.12 React中实现CSS动画效果

本地项目：my_pro1

目标：

使用自定义动画，实现过渡动画并且带有颜色渐变效果。

实现：

只需改进上一节中的样式代码：

//style.css
.show{
 animation: show-item 2s ease-in forwards;
}

.hide{
 animation: hide-item 2s ease-in forwards;
}

@keyframes show-item {
 0%{
     opacity: 0;
     color: blue;
 }
 50%{
     opacity: 0.5;
     color: green;
 }
 100%{
     opacity: 1;
     color: red;
 }
}

@keyframes hide-item {
 0%{
     opacity: 1;
     color: red;
 }
 50%{
     opacity: 0.5;
     color: green;
 }
 100%{
     opacity: 0;
     color: blue;
 }
}

属性/值	效果
animation	使用简写属性，将动画与 div 元素绑定
forward	当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
@keyframes规则	使 div 元素匀速向下移动

4.13 4.14 使用react-transition-group实现动画

介绍：

react-transition-group是一种动画框架。
之所以采用这种动画框架，是因为两个原因：一是可以实现普通CSS做不到的功能，二是可以用JS语句编辑样式。

1. 用react-transition-group实现普通CSS做不到的 "折叠隐藏"DOM。
2. 通过react-transition-group可以就用JS语句来编辑样式。
   框中的代码实现效果是，当动画停止后文字停留在蓝色样式。

目标：

1：利用动画框架实现点击按钮显示\隐藏文字，且带有过渡动画，
2：最终停留在蓝色。
3：页面刷新时有文字浮现动画

实现：

JS文件：

import React, { Component,Fragment } from 'react';
import { CSSTransition } from 'react-transition-group';
import './style.css';

class App extends Component {

    constructor(props){
        super(props);
        this.state = ({
            show: true
        })
    this.handleToggle=this.handleToggle.bind(this);
    }

    render() {
        return(
            <Fragment>
                <CSSTransition
                    in={this.state.show}
                    timeout={1000}  //动画执行时间
                    classname='fade'
                    unmountOnExit
                    onEntered={(el) => {el.style.color='blue'}}
                    appear={true}  //首次出现的动画效果
                >
                    <div>hello</div>
                </CSSTransition>
                <button onClick={this.handleToggle}>toggle</button>
            </Fragment>
        )
    }

    handleToggle(){
        this.setState({
            show: this.state.show ? false:true
        })
    }
}

    export default App;

样式文件：

.fade-enter, .fade-active {      
    opacity: 0;
}

.fade-enter-active, .fade-appear-active { /*入场动画第二个时刻的状态*/
    opacity: 1;
    transition: opacity 1s ease-in;
}

.fade-enter-done {  
    opacity: 1;
}

.fade-exit {        
    opacity: 1;
}

.fade-exit-active { 
    opacity: 0;
    transition: opacity 1s ease-in;
}

. fade-exit-done { 
    opacity: 0;
}