技術標籤：react+ant+ts+node入門到實戰開發react

1.react前期準備

建立react專案

npx create-react-app react-demo
cd react-demo
npm start

環境介紹

node_modules:非常大
public:入口檔案
src:原始碼檔案

2.react-jsx語法

jsx語法:javascript+xml語法(html)
解讀jsx語法:遇到<>,按照HTML語法解析,遇到{},按照Javascript解析

import React from 'react';
import ReactDOM from
 
 'react-dom';

//document.getElementById('root') 獲取要插入的容器
//jsx語法:<h1>hello React</h1>
const react = "React"
ReactDOM.render(
  <h1>hello {react}</h1>,
  document.getElementById('root')
);

3.react-react元素渲染

():如果存在標籤結構,並且標籤結構要換行，需要用()括起來

function tick(){
  const element =
 
 (
    <div>
      <h1>Hello,World</h1>
      <h2>It is {new Date().toLocaleTimeString()}</h2> 
    </div>
  )
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
}

setInterval(tick,1000);

4.react-建立元件

元件的字尾可以是js,也可以是jsx
一個React專案,是由成千上萬元件組成

//Home.jsx
 

import React from 'react';

export default class Home extends React.Component{
    render(){
        return (
            <div>
                Home
            </div>
        )
    }
}

//App.js
import React from 'react'
import Home from './Home'

//用類的形式建立元件
class App extends React.Component{
    //渲染函式
    render(){
        return(
            <div>
                <h1>Hello React Component</h1>
                <h3>學習react,最重要的是,心態要好</h3>
                <Home/>
            </div>
        )
    }
}

export default App;

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

5.react-props屬性

元件的複用性很重要

import React from 'react'

//props不可以被修改
export default class MyNav extends React.Component{
    render(){
        return (
            <div>
                <h3>{this.props.title}</h3>
                <ul>
                    {
                        this.props.nav.map((element,index)=>{
                            return <li key={index}>{element}</li>
                        })
                    }
                </ul>
            </div>
        )
    }
}

import React from 'react'
import Home from './Home'
import MyNav from './MyNav'

//用類的形式建立元件
class App extends React.Component{
    //渲染函式
    render(){
         const nav1 = ["首頁","視訊","學習"]
        const nav2 = ["WEB","Java","Node"]
        return(
            <div>
                <h1>Hello React Component</h1>
                <h3>學習react,最重要的是,心態要好</h3>
                <Home />
                <MyNav nav = {nav1} title="路徑導航"/>
                <MyNav nav = {nav2} title="學習導航"/>
            </div>
        )
    }
}

export default App;

6.react-state狀態

import React from 'react'

export default class StateComponent extends React.Component{
    /**
     * 元件中的狀態state
     * 以前我們操作頁面元素的變化,都是修改dom,操作DOM
     * 但是現在有了React優秀的框架,我們不在推薦操作Dom,頁面元素的改變使用State進行處理
     */
    constructor(props){
        super(props);
        this.state = {
            count:10,
            flag:true
        }
    }

    increment(){
        //setState
        this.setState({
            count:this.state.count+=1
        })
    }

    decrement(){
        this.setState({
            count:this.state.count-=1
        })
    }

    clickHandler= ()=>{
        console.log(this)
    }

    render(){
        const showView = this.state.flag ? '我是孫悟空':'我是假的孫悟空'
        return (
            <div>
                <h3>元件的state</h3>
                <p>{this.state.count}</p>
                <button onClick = {this.increment.bind(this)}>增加</button>
                <button onClick = {this.decrement.bind(this)}>減少</button>
                <button onClick = {this.clickHandler}>關於this</button>
                <p>{showView}</p>
            </div>
        )
    }
}

import React from 'react'
import StateComponent from "./stateComponent";

class App extends React.Component{
    render(){
        return(
            <div>
                <StateComponent />
            </div>
        )
    }
}

7.react-React元件生命週期函式
函式列表：
componentWillMount:在元件渲染之前執行的
componentDidMount:在元件渲染之後完成
shouldComponentUpdate:返回true和false,true表示允許改變,false表示不允許改變
componentWillUpdate:數在修改完成(state,props)據在改變之前執行(state,props)
componentDidUpdate:資料
componentWillReceiveProps:發生改變時執行
componentWillUnmount:元件解除安裝前執行

子傳父、父傳子:

import React from 'react'

export default class ComponentLife extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            count:10
        }
    }

    componentWillMount(){
        console.log("componentWillMount")
    }
    
    componentDidMount(){
        console.log("componentDidMount")
    }

    shouldComponentUpdate(){
        console.log("shouldComponentUpdate")
        return true
    }

    componentWillUpdate(){
        console.log("componentWillUpdate")
    }

    componentDidUpdate(){
        console.log("componentDidUpdate")
    }

    componentWillReceiveProps(){
        console.log("componentWillReceiveProps")
    }

    componentWillUnmount(){
        console.log("componentWillUnmount")
    }

    changeHandler = ()=>{
        this.setState({
            count:this.state.count+=1
        })
    }

    clickChanges = () =>{
        // console.log(this.props)
        this.props.clickChanges('我是兒子的資料');
    }

    render(){
        const {count} = this.state
        return (
            <div>
                生命週期函式:{count}-{this.props.title}
                <button onClick = {this.changeHandler} >修改</button>
                <button onClick = {this.clickChanges} >修改title</button>
            </div>
        )
    }
}

import React from 'react'
import ComponentLife from "./ComponentLife"

//用類的形式建立元件
class App extends React.Component{
    constructor(){
        super();
        this.state = {
            title:"文字1"
        }
    }

    clickChange = (data)=>{
        // this.setState({
        //     title:"文字2"
        // })
        this.setState({
            title:data
        })
    }

    //渲染函式
    render(){
        return(
            <div>
                <ComponentLife title={this.state.title} clickChanges = {this.clickChange} />
                <button onClick = {this.clickChange} >修改title</button>
            </div>
        )
    }
}

export default App;

8.react-setState是同步還是非同步

1.setState會引起檢視的重繪
2.setState在可控元件中是非同步的，在不可控元件中是同步的

import React from 'react';

export default class SetStateDemo extends React.Component{
  constructor(){
    super();
    this.state = {
      count:0
    }
  }

  async increment(){
    // this.setState({
    //   count:this.state.count+=1
    // },()=>{
    //   console.log(this.state.count)//1
    // })
    // console.log(this.state.count);//1
    await this.setStateAsync({count:this.state.count+1});
    console.log(this.state.count)
  }

  setStateAsync(state){
    return Promise((resolve)=>{
      this.setState(state,resolve)
    })
  }

  render(){
    return(
      <div>
        setState同步還是非同步問題
        <p>{this.state.count}</p>
        <button onClick={this.increment.bind(this)}>修改</button>
      </div>
    )
  }
}

9.react-react條件渲染

import React from 'react'

export default class IfDemo extends React.Component{
  /**
   * 常用的應用場景:
   * 1.對檢視條件進行切換
   * 2.做預設值
   */

  constructor(){
    super();
    this.state = {
      isLogin:false,
      names:["ime"]
    }
  }

  clickHandler = ()=>{
    this.setState({
      isLogin:true
    })
  }

  render(){
    const {names} = this.state;
    let showView = this.state.isLogin?
                  <div>iwen</div>:
                  <div>請登入</div>
    return (
      <div>
        條件渲染:{showView}
        <button onClick={this.clickHandler}>登入</button>
        {
          names.length > 0 ?
          <div>
            {
              names.map((element,index)=>{
                return <p key={index}>{element}</p>
              })
            }
          </div>
          :
          <div>請等待資料正在請求...</div>
        }
      </div>
    )
  }
}

10.react-react列表渲染

import React from 'react'

export default class KeyDemo extends React.Component{

  constructor(){
    super();
    this.state = {
      userinfo:[
        {
          name:'iwen',
          age:20,
          sex:"男",
          jobs:['11','222','333']
        },
        {
          name:'ime',
          age:20,
          sex:"男",
          jobs:['11','222','333']
        },
        {
          name:'frank',
          age:20,
          sex:"男",
          jobs:['11','222','333']
        }
      ]
    }
  }

  clickHandler = ()=>{
    this.setState({
      userinfo:this.state.userinfo.concat([{
        name:'sakura',
        age:30,
        sex:"女",
        jobs:['333','444','555']
      }])
    })
  }

  render(){
    return (
      <div>
        <ul>
          {
            this.state.userinfo.map((element,index)=>{
              return(
                <li key={index}>
                  <span>{element.name}</span>
                  <span>{element.age}</span>
                  <span>{element.sex}</span>
                  <div>
                    {
                      element.jobs.map((childElement,childIndex)=>{
                        return <span key={childIndex}>{childElement}</span>
                      })
                    }
                  </div>
                </li>
              )
            })
          }
        </ul>
        <button onClick={this.clickHandler}>增加</button>
      </div>
    )
  }
}

11.react-react表單受控元件

使react的state成為唯一資料來源，渲染表單的react元件還控制著使用者輸入過程中表單發生的操作，被react以這種方式控制取值的表單輸入元素就叫做"受控元件"

import React from 'react'

export default class FormDemo extends React.Component{

  constructor(){
    super();
    this.state = {
      value:""
    }
  }

  handleSubmit = (e)=>{
    e.preventDefault();
    console.log(this.state.value);
  }

  onChangeHandler=(e)=>{
    this.setState({
      value:e.target.value
    })
  }

  render(){
    return(
      <div>
        <form onSubmit = {this.handleSubmit}>
          <input type="text" value={this.state.value} onChange={this.onChangeHandler}/>
          <input type="submit" value="提交"></input>
        </form>
      </div>
    )
  }
}

12.react-React Refs&DOM

ref可以通俗的理解為v-model
ref使用的地方:
管理焦點，文字選擇或者媒體播放
觸發強制動畫
整合第三方DOM庫
import React from 'react'

export default class RefsAndDOM extends React.Component{
  
  constructor(){
    super();
    this.HelloDiv = React.createRef();
  }

  componentDidMount(){
    this.HelloDiv.current.style.color = 'red'
  }

  render(){
    return(
      <div>
        Refs和DOM
        <div ref = {this.HelloDiv}>
          Hello
        </div>
      </div>
    )
  }
}

13.react-react表單非受控元件

import React from 'react'

export default class RefsForm extends React.Component{
  
  constructor(){
    super();
    this.username = React.createRef();
    this.password = React.createRef();
  }

  clickHandler = (e)=>{
    console.log(this.username.current.value)
    console.log(this.password.current.value)
  }

  render(){
    return (
      <div>
        <input type="text" ref={this.username}/>
        <input type="text" ref={this.password}/>
        <button onClick={this.clickHandler}>提交</button>
      </div>
    )
  }
}

14.react-狀態提升

元件之間的資料互動

//parent.jsx
import React from 'react'
import Child1 from './child1'
import Child2 from './child2'

export default class Parent extends React.Component{

  constructor(){
    super();
    this.state = {
      money:7
    }
  }

  changeHandler(e){
    this.setState({
      money:e.target.value
    })
  }

  render(){
    return(
      <div>
        <input type="text" value={this.state.money} onChange={this.changeHandler.bind(this)}/>
        <p>Parent</p>
        人名幣:<Child1 money={this.state.money}/>
        美元:<Child2 money={this.state.money}/>
      </div>
    )
  }
}

//child1.jsx
import React from 'react'

export default class child1 extends React.Component{
  
  constructor(){
    super();
    this.state = {
      input1:0
    };
  }

  componentDidMount(){
    console.log(this.props.money)
    this.setState({
      input1:this.props.money
    })
  }

  changeHandler(e){
    this.setState({
      input1:e.target.value
    })
  }
  
  render(){
    return(
      <div>
        <p>{this.props.money}</p>
        <input type="text" value={this.state.input1} onChange={this.changeHandler.bind(this)}/>
      </div>
    )
  }
}

//child2.jsx
import React from 'react'

export default class child2 extends React.Component{
  
  constructor(){
    super();
    this.state = {
      input2:0
    };
  }

  componentDidMount(){
    this.setState({
      input2:this.props.money*7
    })
  }

  changeHandler(e){
    this.setState({
      input2:e.target.value
    })
  }

  render(){
    return(
      <div>
        <p>{this.props.money*7}</p>
        <input type="text" value={this.state.input2} onChange={this.changeHandler.bind(this)}/>
      </div>
    )
  }
}

15.react-元件組合
this.props.children(元件組合可以類比vue,是插槽)
//Compose

import React from 'react'

export default class Compose extends React.Component{
  render(){
    return(
      <div>
        哈哈哈:{this.props.children}
      </div>
    )
  }
}

import Compose from './compose'

function App() {
  return (
    <div className="App">
      <Compose>
        <div>我是組合效果</div>
      </Compose>
    </div>
  );
}

export default App;

16.react-React PropsType驗證

增強程式的健壯性

import React from 'react'
import PropTypes from 'prop-types';

export default class PropsTypeDemo extends React.Component{
  render(){
    return(
      <div>
        Hello:{this.props.title}
      </div>
    )
  }
}

PropsTypeDemo.propTypes = {
    title:PropTypes.number.isRequired
}

// PropsTypeDemo.propTypes = {
//   title:PropTypes.number
// }