React 進階二-元件最佳實踐

難忘記發表於2019-03-14
React元件

React元件

React的元件大概分為倆部分，無狀態元件和有狀態元件

  • 無狀態元件。下面React官網中定義的一個無狀態元件，值得注意的是無狀態元件無this屬性，只是負責展示一個button。
    • 最輕量級的元件，可以簡單的用來剪下字串，轉換大小寫等簡單的小功能。
    • 就是一個render函式，所以沒有this
    • 據說有針對性的效能優化
    • 沒有生命週期方法，只有在props發生變化時才可以更新UI
    • 無法使用this.xxx
function Square(props) {
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}
複製程式碼
  • 有狀態元件。我們們會從幾個點了解有狀態元件，分別是state，setState，props，children以及lifecycle(生命週期函式)。
    • state是一組與渲染有關的變數的集合
    • setState(updater[, callback]).
      • updater 可以是一個json，對應著state的變化，也可以是一個函式，提供準確的上下文物件。
      // 當前handelClick每次點選只會加一，因為setState的更新使用了批量更新機制，倆次setState會一起執行，所以解決這個問題需要給setState傳遞函式物件
export class Demo extends React.Component {
    constructor(){
        super();
        this.state = {
            count: 0
        }
    }
    handelClick = () => {
        this.setState({
            count: this.state.count + 1
        });
        this.setState({
            count: this.state.count + 1
        })
    }
    render() {
        return (
            <div>
                <button onClick={this.handelClick}>{this.state.count}</button>
            </div>
        )
    }
}
複製程式碼
    • state的最佳實踐
      • 只渲染需要的狀態，保持state的簡潔
      • 可以從props推導的不寫
      • 其他狀態可以作為函式或者class的屬性
      • 理由： 保持程式碼的簡潔，避免不必要的渲染
  • 有狀態元件
    • 宣告方式
      • 函式式
      • React.createClass
      • ES2015-class
      export class Demo extends React.Component {
    static propTypes = {
        name: PropTypes.string
    }
    static defaultProps = {
        name: "Hello Props"
    }
    constructor(props){
        super(props);
        this.state = {
            count: 0
        }
    }
    handelClick = () => {
        this.setState({
            count: this.state.count + 1
        });
        this.setState({
            count: this.state.count + 1
        })
    }
    render() {
        return (
            <div>
                <h1>{this.props.name}</h1>
                <button onClick={this.handelClick}>{this.state.count}</button>
            </div>
        )
    }
}
複製程式碼
    • props
      • 最好定義propTypes以及defaultProps
      • props最佳實踐
        • 簡潔的引數提高可測性，可讀性，props只用基礎資料結構
        • 用props的複雜程度判斷是否拆分元件
        • props只讀，不允許更改
        • 事件使用統一命名，使用箭頭函式宣告
    • CHILDREN children可以是任何東西
      • children的幾個語法糖
        • React.Children.map 無論children是什麼型別都會執行
        • React.Children.count 返回children的length
        • React.Children.toArray 變成陣列

相關文章