React實戰入門指南

基礎入門文件建議直接檢視React中文文件，這樣能少走很多彎路,基於版本V16.6.0
React中文文件

重點：推薦在 React 中使用 JSX 來描述使用者介面。[JSX 簡介]

生命週期

1.元件初始化階段

constructor(props) {
    super(props);
    this.state = {date: new Date()};
}

super(props)用來呼叫基類的構造方法( constructor() ), 也將父元件的props注入給子元件，供子元件讀取(元件中props只讀不可變，state可變)。而constructor()用來做一些元件的初始化工作，如定義this.state的初始內容。
2.元件的掛載階段
componentWillMount
1、元件剛經歷constructor,初始完資料
2、元件還未進入render，元件還未渲染完成，dom還未渲染
componentDidMount
元件第一次渲染完成，此時dom節點已經生成，可以在這裡呼叫ajax請求，返回資料setState後元件會重新渲染
render
render函式會插入jsx生成的dom結構，react會生成一份虛擬dom樹，在每一次元件更新時，在此react會通過其diff演算法比較更新前後的新舊DOM樹，比較以後，找到最小的有差異的DOM節點，並重新渲染
3.更新階段
shouldComponentUpdate
此方法通過比較nextProps，nextState及當前元件的this.props，this.state，返回true時當前元件將繼續執行更新過程，返回false則當前元件更新停止，以此可用來減少元件的不必要渲染，優化元件效能。
優化：利用shouldComponentUpdate鉤子函式優化react效能

shouldComponentUpdate(nextProps,nextState){
    if(nextState.msg == this.state.msg){
      console.log(132312);
      return false;
    }else{
      return true;
    }
}

componentWillReceiveProps
此方法只呼叫於props引起的元件更新過程中，引數nextProps是父元件傳給當前元件的新props。但父元件render方法的呼叫不能保證重傳給當前元件的props是有變化的，所以在此方法中根據nextProps和this.props來查明重傳的props是否改變，以及如果改變了要執行啥，比如根據新的props呼叫this.setState出發當前元件的重新render
componentWillUpdate
此方法在呼叫render方法前執行，在這邊可執行一些元件更新發生前的工作，一般較少用。
componentDidUpdate
此方法在元件更新後被呼叫，可以操作元件更新的DOM，prevProps和prevState這兩個引數指的是元件更新前的props和state

4.解除安裝階段
componentWillUnmount
此方法在元件被解除安裝前呼叫，可以在這裡執行一些清理工作，比如清楚元件中使用的定時器，清楚componentDidMount中手動建立的DOM元素等，以避免引起記憶體洩漏。

父子之間的傳遞屬性

1.不使用redux
父傳子
子元件顯示父元件傳過來的props有兩種方式：
1、直接使用
這種方式，父元件改變props後，子元件重新渲染，由於直接使用的props，所以我們不需要做什麼就可以正常顯示最新的props

class Child extends Component {
    render() {
        return <div>{this.props.someThings}</div>
    }
}

2、轉換成自己的state
這種方式，由於我們使用的是state，所以每當父元件每次重新傳遞props時，我們需要重新處理下，將props轉換成自己的state，這裡就用到了 componentWillReceiveProps。

class Child extends Component {
    constructor(props) {
        super(props);
        this.state = {
            someThings: props.someThings
        };
    }
    componentWillReceiveProps(nextProps) {  //只有新增此方法才會更新父頁面傳過來的引數
        this.setState({someThings: nextProps.someThings});
    }
    render() {
        return <div>{this.state.someThings}</div>
    }
}

子傳父

import React, { Component } from 'react';
import Children from './Children';
class Father extends Component {
  childs = (txt) => {
    console.log(txt)
  }
  render() {
    return (
      <div className="box">
        <Children name="我是父級傳遞過來的" childs={this.childs} fun={this.fun}></Children>
      </div>
        );
  }
}
export default Father;

import React, { Component } from 'react';
class Children extends Component{
    giveFather=()=>{
        const value='你想要傳的值'
        this.props.childs(value)
    }
    render(){
        let str = "我是子元件內的內容";
        return (
            <div className="child">
               {this.props.name}
               <button onClick={this.giveFather}>button</button>
            </div>
        )
    }
}
export default Children;

2.使用redux（狀態管理）: redux中文官網

事件處理

繫結this:

class LoggingButton extends React.Component {
  handleClick = () => {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

或者

class LoggingButton extends React.Component {
  handleClick (val) {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={this.update.bind(this,{name:'111'})}>
        Click me
      </button>
    );
  }
}

通常我們會為事件處理程式傳遞額外的引數，建議選中bind繫結的方式，第一個引數固定為this,引數 e 作為 React 事件物件將會被作為第二個引數進行傳遞。

修改state為物件中的某一個屬性值

針對state為物件,想要修改物件中某一個值而不修改其他值

import React, { Component } from 'react'
import Child from '../components/index'

export default class index extends Component {
  constructor(props){
    super(props);
    this.state = {
      msg:'我是從父元件傳過來的18',
      json:{
        msg:'chen ll',
        name:'chen ll'
      }
    }
  }
  update(){
    let data = Object.assign({}, this.state.json, { msg: '2222' })
    this.setState({json: data})
    console.log(this.state.json)
  }
  render() {
    return (
      <div>
        <Child msg={this.state.msg} childs={this.childs}></Child>
        {this.state.json.msg}
        <button onClick={this.update.bind(this)}>11111111</button>
      </div>
    )
  }
}

元件的隱藏

原理：通過display元素控制

import React, { Component } from 'react'
import Child from '../components/index'

export default class index extends Component {
  constructor(props){
    super(props);
    this.state = {
      msg:true,
      json:{
        msg:'chen ll',
        name:'chen ll'
      }
    }
  }
  update(){
    this.setState(prevState => ({
      msg: !prevState.msg
    }));
  }
  render() {
    return (
      <div>
        <Child msg={this.state.msg}></Child>
        <button onClick={this.update.bind(this)}>11111111</button>
      </div>
    )
  }
}

Child元件

import React, { Component } from 'react'

export default class index extends Component {
    constructor(props){
        super(props);
        this.state = {
            msg : props.msg
        }
    }
    componentWillReceiveProps(nextProps) {
        this.setState({msg: nextProps.msg});
    }

    render() {
        return (
        <div style={{'display':this.state.msg?'block':'none'}}>
            22222222
        </div>
        )
    }
}