四、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;
}