React16免费基础视频教程
https://www.bilibili.com/video/BV1g4411i7po
P1 01_React免费视频课程介绍
https://jspang.com
2019 5年前
react16 16.8.6
https://react.dev/
P2 02_React简介和Vue的对比
P3 03_React开发环境的搭建
npm i -g create-react-app@3.0.0
create-react-app demo01
到时更新新版
mkdir dirname
^18.3.1 19
P4 04-React项目文件目录介绍
serviceWorker PWA 离线网
P5 05_HelloWorld和组件化开发
P6 06_JSX语法简单介绍
class 变 className
面试题
React.createElement('li',null,'js pan')
{true?'':''}
P7 07_React实例-小姐姐服务菜单
Fragment碎片组件 相当小程序block标签
P8 08_React实例-宝剑磨的好理论少不了
import React,{Component,Fragment} from 'react'export default class Koo extends Component{constructor(props){super(props)this.state={inputValue:'koo'}}render(){return (<Fragment><div className='form'><input value={this.state.inputValue} onChange={this.changeValue.bind(this)}/><button>add</button></div></Fragment>)}changeValue(e){// console.log(this)console.log(e)this.setState({inputValue:e.target.value})}
}
P9 09_React实例-老板我要加个钟
P10 10_React实例-宝剑虽然好老腰受不了
P11 11_JSX防踩坑的几个地方
{/* xxx */}
className
dangerouslySetInnnerHtml={{__html:item}}
import React,{Component,Fragment} from 'react'export default class Koo extends Component{constructor(props){super(props)this.state={inputValue:'',list:['vue','react','angular']}}render(){return (<Fragment><div className='form'><label htmlFor='name'>name:</label><input id='name' value={this.state.inputValue} onChange={this.changeValue.bind(this)}/><button onClick={this.add.bind(this)}>add</button></div><ul>{this.state.list.map((item,index)=>{return <li key={index} dangerouslySetInnerHTML={{__html:item}}></li>})}</ul></Fragment>)}changeValue(e){// console.log(this)console.log(e)this.setState({inputValue:e.target.value})}add(){this.setState({list:[...this.state.list,this.state.inputValue],inputValue:''})}
}
P12 12-Simple React Snippets插件的使用
Simple React Snippets
快捷键
imrc 导入 import React, { Component } from 'react'
cc class Test extends Component {
P13 13_Component组件的拆分
P14 14_父子组件的传值
parent
import React,{Component,Fragment} from 'react'
import Item from './Item'export default class Koo extends Component{constructor(props){super(props)this.state={inputValue:'',list:['vue','react','angular']}}render(){return (<Fragment><div className='form'><label htmlFor='name'>name:</label><input id='name' value={this.state.inputValue} onChange={this.changeValue.bind(this)}/><button onClick={this.add.bind(this)}>add</button></div><ul>{this.state.list.map((item,index)=>{// return <li key={index} dangerouslySetInnerHTML={{__html:item}}></li>return <Item content={item} index={index} deleteItem={this.deleteItem.bind(this)}/>//传fun 名字要一样})}</ul></Fragment>)}changeValue(e){// console.log(this)console.log(e)this.setState({inputValue:e.target.value})}add(){this.setState({list:[...this.state.list,this.state.inputValue],inputValue:''})}deleteItem(index){let list=this.state.listlist.splice(index,1)this.setState({list})}
}
child
import React, { Component } from 'react'class item extends Component {state = { } constructor(props){super(props)this.handleClick=this.handleClick.bind(this) //不在标签绑定this 这性能好}render() { return (<li onClick={this.handleClick}>{this.props.content}</li>);}handleClick(){this.props.deleteItem(this.props.index)}
}export default item;
P15 15_单项数据流和其它..
单项数据流 子不可用改父 传个方法打子改父
函数式编程
P16 16-调试工具的安装及使用
React Developer Tools
知乎 react写的 蓝色生成环境 红色调式环境
P17 17_PropTypes校验传递的值
import React, { Component } from 'react'
import PropTypes from 'prop-types'class Item extends Component {state = { } constructor(props){super(props)this.handleClick=this.handleClick.bind(this) //不在标签绑定this 这性能好}render() { return (<li onClick={this.handleClick}>{this.props.avname}-{this.props.content}</li>);}handleClick(){this.props.deleteItem(this.props.index)}
}
Item.propTypes={content:PropTypes.string.isRequired,index:PropTypes.number,deleteItem:PropTypes.func
}
Item.defaultProps={avname:'koo'
}
export default Item;
P18 18_ref属性的使用
this.setState是异步的方法
import React,{Component,Fragment} from 'react'
import Item from './Item'export default class Koo extends Component{constructor(props){super(props)this.state={inputValue:'',list:['vue','react','angular']}}render(){return (<Fragment><div className='form'><label htmlFor='name'>name:</label><input ref={input=>this.input=input} id='name' value={this.state.inputValue} onChange={this.changeValue.bind(this)}/><button onClick={this.add.bind(this)}>add</button></div><ul ref={ul=>this.ul=ul}>{this.state.list.map((item,index)=>{// return <li key={index} dangerouslySetInnerHTML={{__html:item}}></li>return <Item key={index} content={item} index={index} deleteItem={this.deleteItem.bind(this)}/>//传fun 名字要一样})}</ul></Fragment>)}changeValue(e){// console.log(this)this.setState({// inputValue:e.target.valueinputValue:this.input.value})}add(){this.setState({list:[...this.state.list,this.state.inputValue],inputValue:''},()=>{console.log(this.ul.querySelectorAll('li').length)})}deleteItem(index){let list=this.state.listlist.splice(index,1)this.setState({list})}
}
P19 19_React生命周期函数讲解-1
在某一时刻，可以自动执行的函数 生命周期
constructor es6就有了 不是react独有
Mounting
componentWillMount dom将挂载阶段 组件将要挂在到页面的时刻
render 渲染 多次 state改变 组件挂载中
componentDidMount dom挂载完 组件挂载完成的时刻Updation
propscomponentWillReceiveProps 1.组件第一次存在于dom中r 函数是不会被执行2.如果已经存在于Dom中，函数才会被执行 发生变化才执行shouldComponentUpdatecomponentWillUpdaterendercomponentDidUpdate
stateshouldComponentUpdate return true继续往下执行render false停止 优化组件性能componentWillUpdaterendercomponentDidUpdate 更新完执行Unmounting
componentWillUnmount
should树
P20 20_React生命周期函数讲解-2
hooks function
P21 21_React生命周期函数讲解-3
P22 22_React生命周期改善组件性能
import React, { Component } from 'react'
import PropTypes from 'prop-types'class Item extends Component {state = { } constructor(props){super(props)this.handleClick=this.handleClick.bind(this) //不在标签绑定this 这性能好}shouldComponentUpdate(nextProps,nextState){//性能优化if(nextProps.content!==this.props.content){return true}else{return false}}render() { return (<li onClick={this.handleClick}>{this.props.avname}-{this.props.content}</li>);}handleClick(){this.props.deleteItem(this.props.index)}
}
Item.propTypes={content:PropTypes.string.isRequired,index:PropTypes.number,deleteItem:PropTypes.func
}
Item.defaultProps={avname:'koo'
}
export default Item;
P23 23_React用Axios请求远程数据
componentDidMount axios请求
componentWillMount 请求 RN有问题
https://web-api.juejin.im/v3/web/wbbr/bgeda
P24 24_Axios请求EasyMock数据
https://easy-mock.com/login
P25 25_用CSS3实现React动画
P26 26_CSS3的keyframes动画
P27 27_react-transition-group动画库学习
react-transition-group
Transition 三个基本库组成
CSSTransition
TransitionGroup
import React,{Component,Fragment} from 'react'
import Item from './Item'
import { CSSTransition } from 'react-transition-group'
import './Koo.css'export default class Koo extends Component{constructor(props){super(props)this.state={inputValue:'',list:['vue','react','angular'],isShow:true}this.changeShow=this.changeShow.bind(this)}componentWillMount(){}componentDidMount(){}render(){return (<Fragment><div className='form'><label htmlFor='name'>name:</label><input ref={input=>this.input=input} id='name' value={this.state.inputValue} onChange={this.changeValue.bind(this)}/><button onClick={this.add.bind(this)}>add</button></div><ul ref={ul=>this.ul=ul}>{this.state.list.map((item,index)=>{// return <li key={index} dangerouslySetInnerHTML={{__html:item}}></li>return <Item key={index} content={item} index={index} deleteItem={this.deleteItem.bind(this)}/>//传fun 名字要一样})}</ul><div><CSSTransitionin={this.state.isShow}timeout={2000}classNames='boss-text'unmountOnExit><div>boss</div></CSSTransition><button onClick={this.changeShow}>change</button></div></Fragment>)}changeShow(){this.setState({isShow:this.state.isShow?false:true})}changeValue(e){// console.log(this)this.setState({// inputValue:e.target.valueinputValue:this.input.value})}add(){this.setState({list:[...this.state.list,this.state.inputValue],inputValue:''},()=>{console.log(this.ul.querySelectorAll('li').length)})}deleteItem(index){let list=this.state.listlist.splice(index,1)this.setState({list})}
}
.boss-text-enter{opacity: 0;}
.boss-text-enter-active{opacity: 1; transition: opacity 2000ms;}
.boss-text-enter-done{opacity: 1; }
.boss-text-exit{opacity: 1;}
.boss-text-exit-active{opacity: 0; transition: opacity 2000ms;}
.boss-text-exit-done{opacity: 0; }
P28 28_多DOM动画制作和编辑
旧版 新版
动画岗位
animation forwards最后停止
import React,{Component,Fragment} from 'react'
import Item from './Item'
import { CSSTransition,TransitionGroup } from 'react-transition-group'
import './Koo.css'export default class Koo extends Component{constructor(props){super(props)this.state={inputValue:'',list:['vue','react','angular'],isShow:true}this.changeShow=this.changeShow.bind(this)}componentWillMount(){}componentDidMount(){}render(){return (<Fragment><div className='form'><label htmlFor='name'>name:</label><input ref={input=>this.input=input} id='name' value={this.state.inputValue} onChange={this.changeValue.bind(this)}/><button onClick={this.add.bind(this)}>add</button></div><ul ref={ul=>this.ul=ul}><TransitionGroup>{this.state.list.map((item,index)=>{// return <li key={index} dangerouslySetInnerHTML={{__html:item}}></li>return (// appear={true} 新版没了<CSSTransition timeout={2000} key={index+item} classNames='boss-text' unmountOnExit><Item key={index} content={item} index={index} deleteItem={this.deleteItem.bind(this)}/></CSSTransition>)//传fun 名字要一样})}</TransitionGroup></ul><div><CSSTransitionin={this.state.isShow}timeout={2000}classNames='boss-text'unmountOnExit><div>boss</div></CSSTransition><button onClick={this.changeShow}>change</button></div></Fragment>)}changeShow(){this.setState({isShow:this.state.isShow?false:true})}changeValue(e){// console.log(this)this.setState({// inputValue:e.target.valueinputValue:this.input.value})}add(){this.setState({list:[...this.state.list,this.state.inputValue],inputValue:''},()=>{console.log(this.ul.querySelectorAll('li').length)})}deleteItem(index){let list=this.state.listlist.splice(index,1)this.setState({list})}
}
