课件：
https://xiedaimala.com/tasks/ec7b35c1-0d5d-4b89-ae1c-d2b6e603ab76
代码
链接：https://jsbin.com/jupijuq/1/edit?html,js,output
- HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.production.min.js"></script>
<title>JS Bin</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
- CSS
.header{
display: flex;
justify-content: center;
}
.track{
border-bottom: 1px solid black;
}
*{margin:0;padding: 0; box-sizing: border-box;}
.playground{
border: 1px solid black;
background: green;
}
body{
padding: 40px;
}
- JS
class App extends React.Component{
constructor(){
super()
this.state = {
result1: 0,
result2: 0
}
this.t0 = new Date()
}
success1(x){
console.log(x)
console.log('兔子跑完了，用时')
let r1 = new Date() - this.t0
this.setState({
result1: r1
})
}
success2(x){
console.log(x)
console.log('乌龟跑完了，用时')
let r2 = new Date() - this.t0
this.setState({
result2: r2
})
}
render(){
return (
<div>
<div class="header">
<Time1 result={this.state.result1}/>
<Time2 result={this.state.result2}/>
</div>
<Playground success1={this.success1.bind(this)}
success2={this.success2.bind(this)}/>
</div>
)
}
}
function Time1(props){
return (
<div>
<h2>🐇用时</h2>
<div>{props.result}</div>
</div>
)
}
function Time2(props){
return (
<div>
<h2> 🐢用时</h2>
<div>{props.result}</div>
</div>
)
}
function Judge(){
return (
<div>裁判</div>
)
}
function Playground(props){
let success1 = props.success1
let success2 = props.success2
return (
<div class="playground">
<Track1 success={success1} />
<Track2 success={success2}/>
</div>
)
}
class Track1 extends React.Component{
constructor(){
super()
let n = 0
this.state = {
style: {
transform: `translateX(${n}%)`
}
}
let timerId = setInterval(()=>{
n+=25
this.setState({
style: {
transform: `translateX(${n}%)`
}
})
if(n>=100){
window.clearInterval(timerId)
this.props.success('我是小兔兔')
}
},1000)
}
render(){
return (
<div>
<div class="player" style={this.state.style}>🐇</div>
<div class="track"></div>
</div>
)
}
}
class Track2 extends React.Component{
constructor(){
super()
let n = 0
this.state = {
style: {
transform: `translateX(${n}%)`
}
}
let timerId = setInterval(()=>{
n+=20
this.setState({
style: {
transform: `translateX(${n}%)`
}
})
if(n>=100){
window.clearInterval(timerId)
this.props.success('我是小龟龟')
}
},1000)
}
render(){
return (
<div>
<div class="player" style={this.state.style}>🐢</div>
<div class="track"></div>
</div>
)
}
}
ReactDOM.render(<App></App>, document.querySelector('#root'))
一、React龟兔赛跑1
function App(){//react 函数组件
return(
<h1>hi</h1>
)
}
class App2 extends React.Component{//react class组件
render(){
return(
<h2>hi 2</h2>
)
}
}
ReactDOM.render(<App2 />,document.getElementById('root'))
-
用react实现龟兔赛跑
乌龟一个跑道，兔子一个跑道，一个裁判有计时板显示龟兔完成比赛所用时间。
龟兔赛跑开始.png
龟兔赛跑过程.png
龟兔赛跑结束.png
1.1 龟兔赛跑1
https://github.com/VivienYang/reactDemo/blob/master/task3Demo/demo2.html
1.2 龟兔赛跑2
怎么让兔子和乌龟动起来？
用css改变龟/兔的位置
改变轨道中的龟/兔状态，组件Track内部状态改变，不能用function，改用class
Track function
Track Class
设置定时器让龟兔动起来
匀速跑
//兔子轨道
class TrackRabit extends React.Component{
constructor(){
super()
let n=0
let start=new Date()
this.state={
animalStyle:{
transform: `translateX(${n}%)`
}
}
let runInt = setInterval(() => {
n+=10
this.setState({
animalStyle:{
transform: `translateX(${n}%)`
}
})
if(n >= 100){//跑到了终点
clearInterval(runInt)
}
}, 1000);
}
render(){
return(
<div class="trackWrapper">
<div class="animal" style={this.state.animalStyle}>🐇</div>
<div class="track"></div>
</div>
)
}
}
-
龟/兔到了终点，怎么通知裁判呢？
父子通信-子组件给父组件通知
父组件传一个方法给子组件
子组件在合适的地方调用这个方法，也可以传参
- 父组件App传一个
success方法给子组件TrackRabit - 子组件TrackRabit跑到终点，调用
success方法通知父组件 - 兔子跑到终点，子组件TrackRabit通知父组件后，父组件计算用时，更新result1的state
- result1改变，父组件App通过props传递给子组件TimeRabit，显示兔子比赛用时
// 龟兔赛跑2
function TimeRabit(props){//兔子用时
return(
<div>
<h2>🐇用时</h2>
<div>{props.result}</div>
</div>
)
}
function TimeTortoise(props){//乌龟用时
return(
<div>
<h2>🐢用时</h2>
<div>{props.result}</div>
</div>
)
}
class TrackRabit extends React.Component{
constructor(){
super()
let n=0
this.state={
animalStyle:{
transform: `translateX(${n}%)`
}
}
let runInt = setInterval(() => {
n+=25
this.setState({
animalStyle:{
transform: `translateX(${n}%)`
}
})
if(n >= 100){
//跑到终点，关掉定时器
clearInterval(runInt)
//跑到终点，通知父组件
this.props.success('我是小兔子')
}
}, 1000);
}
render(){
return(
<div class="trackWrapper">
<div class="animal" style={this.state.animalStyle}>🐇</div>
<div class="track"></div>
</div>
)
}
}
class TrackTortoise extends React.Component{
constructor(){
super()
let n=0
this.state={
animalStyle:{
transform:`translateX(${n}%)`
}
}
let runInt=setInterval(() => {
n+=20
this.setState({
animalStyle:{
transform:`translateX(${n}%)`
}
})
if(n>=100){
//跑到终点，关掉定时器
clearInterval(runInt)
//跑到终点，通知父组件
this.props.success('我是小乌龟')
}
}, 1000);
}
render(){
return(
<div class="trackWrapper">
<div class="animal" style={this.state.animalStyle}>🐢</div>
<div class="track"></div>
</div>
)
}
}
class App extends React.Component{
constructor(){
super()
this.state={
result1:0,
result2:0
}
this.start=new Date()
}
successRabit(x){
//兔子跑到终点，子组件TrackRabit通知父组件后，
//父组件计算用时，更新result1的state
//result1改变，通过props传递给子组件TimeRabit，显示兔子比赛用时
console.log(x)
let time = new Date() - this.start
console.log(`兔子跑到了终点，用时${time}ms`)
this.setState({
result1:time
})
}
successTortoise(x){
//乌龟跑到终点，子组件TrackTortoise通知父组件后，
//父组件计算用时，更新result2的state
//result2改变，通过props传递给子组件TimeTortoise，显示乌龟比赛用时
console.log(x)
let time = new Date() - this.start
console.log(`乌龟跑到了终点，用时${time}ms`)
this.setState({
result2:time
})
}
render(){
return(
<div>
<div class="header">
<TimeRabit result={this.state.result1}/>
<TimeTortoise result={this.state.result2}/>
</div>
<TrackRabit success={this.successRabit.bind(this)}/>
<TrackTortoise success={this.successTortoise.bind(this)}/>
</div>
)
}
}
ReactDOM.render(<App />,document.getElementById('root'))
1.3 龟兔赛跑3（未整理好）
- 爷孙通信
App组件，引用子组件PlayGround组件
PlayGround组件，引用子组件TrackTortoise和TrackRabit
三者的关系是：App组件是TrackTortoise和TrackRabit组件的爷爷，爷孙组件通信
参考代码
课后习题：
同学的答卷
遗留问题：
- function组件和class组件的区别？？？
- 父子通信，爷孙通信？
- 什么时候需要.bind(this)？
网友评论