平時寫react 小技巧，不錯喲~

凹凸卿發表於2017-04-06
React

Github: github.com/aototo/blog
喜歡文章的朋友star 支援一下，長期更新...絕不偷懶

  • Stateless function 無狀態元件

    平時寫元件用到比較多的就是無狀態元件，不但優雅，也是優化react效能的一種手段。
      const Greeting = ({ name, style }) => {
    return <div style={style}>{name}</div>
  };複製程式碼

  • Array as children 把陣列資料渲染出來

    經常會遇到處理陣列資料的情況，可以用下面的方式簡單的渲染出來。

      render() {
      return (
          (<ul>
              {List.map((item) => (
                   <li>{item}</li>
              ))}
          </ul>)
      )     
  }複製程式碼

  • 封裝基礎類元件

    比如 <input type="text" > 每次寫很麻煩吧，可以封裝一個成一個元件

      const Input = (props) => {
      return <input type = {props.type} {...props} />
  }複製程式碼

  • Layout Component 佈局元件

    元件可以分成很多類類，有的是佈局類，有的是功能類。下面是一種佈局類的元件。

    
  <FlexContainer>
    <div style={{ flex: 1 }}>{this.props.leftSide}</div>
    <div style={{ flex: 2 }}>{this.props.rightSide}</div>
  </FlexContainer>複製程式碼

  • Higher Order Component 高階元件

    高階元件很像decorator，提升元件的能力。比如你想一些元件裡面使用一下功能，react-router 中

      import { withRouter } from 'react-router'
  withRouter(SomeComponent)複製程式碼

    例子：

    
  var Enhance = ComposedComponent => class extends React.Component {
    componentDidMount() {
      this.setState({ name: "李狗子" });
    }
    render() {
      return <ComposedComponent {...this.props} name = {this.state.name} />;
    }
  };複製程式碼

  • 受控元件，不受控元件

    專案中經常會用到這兩種情況如：
    受控元件，更新的時候需要使用this.setState

      constructor() {
      super();
      this.state = {value: ""}
  }
  render() {
      return <input type="text" value={this.state.value} />
  }複製程式碼

    不受控元件，主要需要通過ref來獲取input的值。

      render() {
      return <input type="text" ref="myInput" />
  }複製程式碼

    兩種方法都可以在特定的場合去使用，個人覺得資料相對重要的頁面需要使用受控元件會比較合適。

  • 使用三元表示式

    專案中經常有判斷語句，用三元表示式可以很方便的寫出想要的邏輯

      const demo = ({ isOK }) => {
      return isOK 
      ? <p> Yes </p> 
      : <p> No </p>
  };複製程式碼

  • 給setState傳入function

    可以使用function來更新state

    
  this.setState((prevState, props) => ({
      return ...
  }));複製程式碼

  • 通過ref屬性獲取component

    場景：下面的例子是初始化元件後，讓input預設獲取游標。ref最終指向的已經渲染好的DOM節點，或者是react class的例項。具體可以看官方的文件

      componentDidMount() {
      this.input.focus();
  }
  render() {
      return (
          <input
            ref={comp => { this.input = comp; }}
          />
      )
  }複製程式碼

  • 切勿使用...props傳遞資料

    一個非常錯誤的做法比如：

      <Component {...props} />複製程式碼

    props上面如果有非常多的屬性，會造成非常昂貴的計算。正確的應該

      <Component name = { props.name } />複製程式碼

以上是平時寫React用到的一些寫法小技巧，說有用還蠻有用的！

有錯誤的地方還請指正！謝謝大家。

下面2個連結都很棒哦！記得收藏star...

參考：

github.com/vasanthk/re…

react 程式碼規範

github.com/airbnb/java…

相關文章