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

時間 2019-11-17

標籤平時 react 技巧不錯欄目 React 简体版

原文原文鏈接

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

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

Array as children 把數組數據渲染出來

常常會遇處處理數組數據的狀況，能夠用下面的方式簡單的渲染出來。html
```
render() {
      return (
          (<ul> {List.map((item) => ( <li>{item}</li> ))} </ul>)
      )     
  }複製代碼
```

封裝基礎類組件

好比 <input type="text" > 每次寫很麻煩吧，能夠封裝一個成一個組件java

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

Layout Component 佈局組件

組件能夠分紅不少類類，有的是佈局類，有的是功能類。下面是一種佈局類的組件。react

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

Higher Order Component 高階組件

高階組件很像decorator，提高組件的能力。好比你想一些組件裏面使用一下功能，react-router 中git

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

例子：github

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的值。react-router
```
render() {
      return <input type="text" ref="myInput" /> }複製代碼
```
兩種方法均可以在特定的場合去使用，我的以爲數據相對重要的頁面須要使用受控組件會比較合適。less

使用三元表達式

項目中常常有判斷語句，用三元表達式能夠很方便的寫出想要的邏輯ide

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 } />複製代碼
```