React項目中那些奇怪的寫法

一、在一個React組件裏看到一個奇怪的寫法：

 const {matchs} = this.props.matchs;

原來，是解構賦值，雖然據說過，可是看起來有點奇怪

下面作個實驗：

 <script type="text/javascript">
        var props = {
            key1: 123 + "",
            key2: 456,
            key3: 789
        }
        const { key1 } = props
        console.log(key1, typeof (key1))

 </script>

原來能夠減小很多代碼量

 

二、以下

 

npm install graphql-tag --save
import gql from 'graphql-tag';
import { Query } from 'react-apollo';
 
const GET_DOGS = gql`
  {
    dogs {
      id
      breed
    }
  }
`;
 
const Dogs = ({ onDogSelected }) => (
  <Query query={GET_DOGS}>
    {({ loading, error, data }) => {
      if (loading) return 'Loading...';
      if (error) return `Error! ${error.message}`;
 
      return (
        <select name="dog" onChange={onDogSelected}>
          {data.dogs.map(dog => (
            <option key={dog.id} value={dog.breed}>
              {dog.breed}
            </option>
          ))}
        </select>
      );
    }}
  </Query>
);

 

很明顯，return裏這個箭頭函數的參數將是傳入一個對象， 而且極可能不止3個屬性，所以進行結構賦值以取屬性來用。只有當函數的參數是一個對象時，變量

loading, error, data

纔會經過解構賦值生成。若是函數調用時沒提供參數，變量

loading, error, data

就不會生成，並報錯。

 

爲何gal後面跟一個字符串？

 

原來是模板字符串的功能：它能夠緊跟在一個函數名後面，該函數將被調用來處理這個模板字符串。這被稱爲「標籤模板」功能（tagged template）

alert`123`
// 等同於
alert(123)

 

參考：http://es6.ruanyifeng.com/#docs/string

 

三、

@withHeader
export default class Demo extends Component {
  render() {
    return (
      <div>
        我是一個普通組件
      </div>
    );
  }
}

在這裏使用了ES7裏的decorator，來提高寫法上的優雅，可是實際上它只是一個語法糖，下面這種寫法也是能夠的：

const EnhanceDemo = withHeader(Demo);

參考：https://segmentfault.com/a/1190000010371752