四、React进阶

4.2 PropTypes和DefaultProps的应用

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

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

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

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

arrayOf[类型，类型，…]

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

4.3 props，state，render（）的关系

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

4.4~4.6 React中的虚拟DOM

介绍：

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

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

二、深入了解虚拟DOM

React数据视图更新原理：

state数据JSX模板数据 + 模板 生成虚拟DOM（虚拟DOM就是一个JS对象，用它来描述真实DOM）（损耗了性能） [‘div’, {id: ‘abc’}, [‘span’, {}, ‘hello world’]]用虚拟DOM的结构生成真实的DOM，来显示： <div id='abc'><span>hello world</span></div> state发生变化数据 + 模板 生成新的虚拟DOM（极大的提升了性能） [‘div’, {id: ‘abc’}, [‘span’, {}, ‘bye bye’]]比较原始虚拟DOM和新的虚拟DOM的区别，找到区别是span中的内容（极大的提升了性能）直接操作DOM，改变span中的内容

优点：

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

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

4.7 React中ref的使用

介绍：

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

4.8 React的生命周期函数

介绍：

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

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

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

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

介绍：

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

避免一个组件做无谓的render操作（提升性能）: //例子：只有content改变了，才需要重新渲染该组件 shouldComponentUpdate(nextProps, nextState, nextContext) { if(nextProps.content !== this.props.content) { return true; }else{ return false; } } 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语句编辑样式。

用react-transition-group实现普通CSS做不到的 "折叠隐藏"DOM。通过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; }