React进阶

2019独角兽企业重金招聘Python工程师标准>>>

PropTypes和DefaultProps

PropTypes用来校验从父组件传递的属性的类型

TodoItem.propTypes = {
    item: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    deleteItem: PropTypes.func,
    test: PropTypes.string.isRequired
}

defaultProps用来设置属性的默认值

TodoItem.defaultProps = {
    test: 'hello'
}

---

props、state和render函数的关系

当组件的state或者props发生改变的时候，render函数就会重新执行

当父组件的render函数被执行时，子组件的render函数都将被重新执行

---

虚拟DOM

生成新的DOM需要调用WEB API，每个元素都很多属性和内容，所以DOM操作很消耗性能

虚拟DOM，使用JS模拟/描述DOM结构，通过Diff算法，来对比两次虚拟DOM（JS对象）的差异
能精确定位到发生变化的属性/元素然后再进行渲染，而不是重新渲染整个元素或DOM树，进而大大提高性能

---

React中的Diff算法

虚拟DOM比对是通过Diff（Different）算法实现的，比对规则

1、同级比较，第一层一致，再比对下一层，若有差异，就不再往下比对，提升比对速度

2、通过key值，可以迅速匹配到比对对象；所以key值要唯一且稳定，不要用index做key值

3、setState方法是异步的，短时间内的多次setState可以合并成一次，减少虚拟DOM比对次数

---

React中ref的使用

reference引用，用来获得页面上的DOM元素
ref={(input) => { this.input = input }}后 e.target可以替换成this.input

在与setState同时使用时，要将DOM操作放在setState的第二个参数中，也是一个匿名/箭头函数

因为setState是一个异步的方法，通过ref获得的DOM元素并不是最新的，另外react不建议直接操作DOM

---

React生命周期函数

指在某一时刻组件会自动执行的函数

将被废弃的生命周期函数：componentWillMount()、componentWillUpdate()、componentWillReceiveProps()

---

axios的使用

安装依赖包npm install axios --save

import axios from 'axios'
componentDidMount() {
    axios.get('/api/list.json').then((res) => {
        this.setState(() => ({
            list: [...res.data.list] //最好打散
        }))
    }).catch(() => { alert('error') })
}

---

避免子组件重复渲染

使用shouldComponentUpdate生命周期函数

shouldComponentUpdate(nextProps) {
    if (nextProps.item !== this.props.item) {
        return true
    } else {
        return false
    }
}

---

react-transition-group动画

安装npm install react-transition-group --save

JSX模板

import { CSSTransition } from 'react-transition-group'
<CSSTransition
    in={this.state.flag}
    timeout={1000}
    classNames='fade'
    unmountOnExit
    appear={true}
    onEntered={(el) => { el.style.color = 'red' }}
>
    <div>hello</div>
</CSSTransition>

CSS样式

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

.fade-enter-active, .fade-appear-active {
    opacity: 1;
    transition: all 1s ease-in;
}

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

.fade-exit {
    opacity: 1;
}

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

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

<TransitionGroup>、<CSSTransiton>用于对一组元素设置动画

---

转载于:https://my.oschina.net/startjcu/blog/3051325