React-Demo 部分重構

ZhuRon發表於2019-02-25
React

寫在前面的話：

最近在做從vue=>react的遷移性學習，然後找到了阮一峰老師在15年寫的《React入門例項教程》，講的內容絲絲入扣，裡面所透露的思想也讓我收穫頗多。

但是畢竟15年的文章，所用的語法在我看來有點打眼，所以做了一個小小的語法遷移，希望能對大家有幫助

安裝

考慮到一些跟我一樣剛開始學習react的朋友，所以還是寫一下如何快速啟動一個專案進行練習

關於react的安裝不再多表，因為想快速的開始練習。我用的是create-react-APP這個腳手架幫助安裝

  1. npm install -g create-react-app 安裝腳手架
  2. create-react-APP ryf-react 建立專案
  3. cd ../ 進入專案上一層
  4. yarn start 啟動專案

因為是根據阮一峰老師的專案做基礎的，所以取名ryf-react

開始

進入app.js檔案

react能將模板裡面的東西轉成html，並插入指定的 DOM 節點。就是可以用jsx（它允許 HTML 與 JavaScript 的混寫）在js裡面寫html，在app.js的render(){return()}的return()就可以寫jsx了。

這只是我的口語化表達方便理解，真正的內容還是請移步阮老師的文章。

當然業務不可能都在app.js裡面實現
但是這不妨礙我們在app.js裡面做一些關於react遷移性學習的練手

在強調一遍，因為只是重構了語法，本質沒有變，所以沒有重新解釋這些demo，想看裡面的語法請移步阮老師的文章

1.render demo

class App extends Component {
  render() {
    const names = [`Alice`,`Emily`,`kate`]
    return (
      <div className="App">
        <ul>
          {
            names.map((name,index)=>{
              return(
                <div key={index}>
                  hello,{name}
                </div>
              )
            })
          }
        </ul>
      </div>
    );
  }
}
複製程式碼

2.元件demo

class HelloMessage extends Component {
  render () {
    return <h1>Hello {this.props.name}</h1>
  }
}
class App extends Component {
  render() {
    const arr = [
      <h1 key="1">Hello world</h1>,
      <h1 key="2">React is awesome</h1>,
    ]
    return (
      <div className="App">
      <HelloMessage name="john"></HelloMessage>
        <ul>
          {
            arr
          }
        </ul>
      </div>
    );
  }
}
複製程式碼

3.children demo

在vue裡面的slot在react裡面就被叫children

class NoteList extends Component {
  render () {
    return(
      <ol>
        {this.props.children.map((child,index) => <li key={index}>{child}</li>) }
      </ol>
    )
  }
}
class App extends Component {
  render() {
    return (
      <div className="App">
        <NoteList>
          <span>hello</span>
          <span>world</span>
        </NoteList>
      </div>
    );
  }
}
複製程式碼

4.檢驗引數 demo

react引數檢測可以用一個包來解決，yarn add prop-types

import React, { Component } from `react`;
import PropTypes from `prop-types`
import `./App.css`;


class MyTitle extends Component {
    render() {
        return <h1>{this.props.title}</h1>
    }
}

MyTitle.propTypes = {
    title: PropTypes.string
};
class App extends Component {
  render() {
    const data = 123
    return (
      <div className="App">
      <MyTitle title={data}/>
      </div>
    );
  }
}
複製程式碼

5.react狀態改變 demo

react擁有一個初始狀態，通過事件觸發可以改變狀態

import `./App.css`;
class LikeButton extends Component{
  state = {
    liked: false
  }
  handleClick (){
    console.log(this)
  }
  render () {
    const text = this.state.Liked? `like`: `don`t like`
    return (
      <p onClick={() => {this.handleClick()}}>
        You { text } this click to toggle
      </p>
    )
  }
}
class App extends Component {
  handleClick(){
    this.refs.myTextInput.focus()
  }
  render() {
    return (
      <div className="App">
        <input type="text" ref="myTextInput"/>
        <input type="button" ref="focus the text input" onClick={this.handleClick.bind(this)}/>
      </div>
    );
  }
}

複製程式碼

6.雙向繫結 demo

react不擁有vue裡面的v-model，但是可以手動實現

class App extends Component {
  state ={
    value:`Hello!`
  }
  handleChange(event) {
    this.setState({
      value:event.target.value
  });
}
  render() {
    const value = this.state.value
    return (
      <div className="App">
       <div>
         <input type="text" value={value} onChange={this.handleChange.bind(this)}/>
         <p>{value}</p>
       </div>
      </div>
    );
  }
}
複製程式碼

7.生命週期 demo

class Hello extends Component {
    state = {
        opacity: 1.0
    }
    componentDidMount() {
        setInterval(() => {
            let opacity = this.state.opacity;
            opacity -= 0.05;
            if (opacity < 0.1) {
                opacity = 1;
            }
            this.setState({
                opacity
            })
        }, 100)
    }
    render() {
        return (
            <div style={{ opacity: this.state.opacity }}>
                Hello {this.props.name}
            </div>
        )
    }
}

class App extends Component {
    render() {
        return (
            <div className="App">
                <Hello name="world" />
            </div>
        );
    }
}

複製程式碼

8.ajax 請求 demo

class UserGist extends Component {
    state = {
        username: ``,
        lastGisUrl: ``
    }
    render () {
        return (
            <div>
                {this.state.username}`s last gist is <a href={this.state.lastGisUrl}>here</a>
            </div>
        )
    }
    componentDidMount() {
        fetch(this.props.source)
        .then(data => data.json())
        .then(data =>{
            const lastGist = data[0];
            this.setState({
                username: lastGist.owner.login,
                lastGisUrl: lastGist.html_url
            })
        })
    }
}

class App extends Component {
    render() {
        return (
            <div className="App">
                <UserGist source="https://api.github.com/users/octocat/gists" />
            </div>
        );
    }
}
複製程式碼

總結

react的門檻比vue來得高，如何做好遷移性學習可能是簡約時間的一個好方法。希望對大家react的學習有一點幫助，有錯誤的地方也歡迎大家告訴我，共同進步~

附原始碼地址

再附阮一峰老師文章地址

相關文章