React16
React16免费基础视频教程
https://www.bilibili.com/video/BV1g4411i7po
P1 01_React免费视频课程介绍
2019 5年前
react16 16.8.6
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.list
list.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.value
inputValue: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.list
list.splice(index,1)
this.setState({
list
})
}
}
P19 19_React生命周期函数讲解-1
在某一时刻，可以自动执行的函数 生命周期
constructor es6就有了 不是react独有
Mounting
componentWillMount dom将挂载阶段 组件将要挂在到页面的时刻
render 渲染 多次 state改变 组件挂载中
componentDidMount dom挂载完 组件挂载完成的时刻
Updation
props
componentWillReceiveProps
1.组件第一次存在于dom中r 函数是不会被执行
2.如果已经存在于Dom中，函数才会被执行 发生变化才执行
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
state
shouldComponentUpdate return true继续往下执行render false停止 优化组件性能
componentWillUpdate
render
componentDidUpdate 更新完执行
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数据
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>
<CSSTransition
in={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.value
inputValue: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.list
list.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>
<CSSTransition
in={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.value
inputValue: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.list
list.splice(index,1)
this.setState({
list
})
}
}
浙公网安备 33010602011771号