react學習（一）組件

react這個東西，說實話，我剛剛接觸一個月不到。感受這玩意很顛覆我之前的前端開發

比方說，可能，整個項目，並無一個html文件

比方說，之前咱們寫前端代碼，分的清清楚楚，html裏面就是放dom，css裏面放樣式，js裏面放邏輯處理

比方說...

手裏頭正好在寫一個項目，也順帶着看着書，就稍微記一點本身的理解

組件

我以爲這個是react的核心了哇

之前也寫組件，畢竟是加快開發的東西，就像雕版印刷最後發展到活字印刷的必然性。組件也是必然的。

可複用很重要，一個項目，甚至多個項目，確定會有很相似的東西，他們每每只是某部分不一樣，差很少就這個意思，把不一樣的地方搞成個變量，恩，差很少就這樣理解挺方便的

下面研究下react的組件

/**
 * @file
 * @author fengying
 */
import React, { PureComponent, PropTypes } from 'react';
import styles from './boxTitle.less';

export default class boxTitle extends PureComponent {

　// 定義參數的類型以及是否爲必須的,若是這邊不是必須就要在defaultProps裏面
  static propTypes = {
    title: PropTypes.string,
　　 icon: PropTypes.bool.isRequired,
  }

  // 定義非必要的參數的默認值
  static defaultProps = {
    title: '',
  }

  // 構造函數，定義默認的state
  constructor(props) {
    super(props);

    this.state = {
    };
  }

  // 在render()方法執行前執行，只執行一次
  componentWillMount() {
  }

  // 在render()方法執行後執行，只執行一次
  componentDidMount() {
  }

  // 當組件傳入的 props 發生變化時調用，例如：父組件狀態改變，給子組件傳入了新的prop值。用於組件 props 變化後，更新state。
  componentWillReceiveProps(nextProps) {
    // this.setState({ });
  }

  // 接受須要更新的props和state，讓開發者增長必要的條件判斷，讓其在須要時更新，不須要時不更新，當方法返回false時，組件再也不向下執行生命週期方法
  shouldComponentUpdate(nextProps, nextState) {
  }

  // 從新渲染組件刷新前
  componentWillUpdate() {
  }

  // 從新渲染組件刷新後
  componentDidUpdate() {
  }

  // 組件銷燬前（事件回收或者清除定時器等方法）
  componentWillUnmount() {
  }

  render() {
    const { title， icon } = this.props;
    return (
      <div className={styles.title}>
        {
　　　　　　　　icon ？ <span className={styles.tip} /> ： ''
　　　　　}
        {title}
      </div>
    );
  }
}

　　這個是項目裏一個小標題

     基本上能夠做爲一個模板，固然有些方法沒用到的，能夠刪了

總結

生命週期三個狀態：

• Mounting：已插入真實 DOM
• Updating：正在被從新渲染
• Unmounting：已移出真實 DOM

狀態的處理函數：

• componentWillMount()
• componentDidMount()
• componentWillUpdate(object nextProps, object nextState)
• componentDidUpdate(object prevProps, object prevState)
• componentWillUnmount()

特殊的處理函數：

• componentWillReceiveProps(object nextProps)：已加載組件收到新的參數時調用，DOM不會二次渲染
• shouldComponentUpdate(object nextProps, object nextState)：組件判斷是否從新渲染時調用

render裏面return的html，用{}包圍起來寫js代碼

state改變，頁面會從新渲染

setState方法是異步的，若要在改變state值後進行操做，記得寫在回調函數裏面