React中需要注意的地方（一）

本文翻譯自官方文檔TIPS部分，因爲個人水平限制，歡迎指正。

本文主旨：本文可以使用React解決一部分你可能遇到的問題，提醒你注意一些常見的誤區。

一、行內樣式

    在React中，style行內樣式不再是一個簡單的字符串。它是一個{}的對象，這個對象裏邊的key是樣式名稱的駝峯命名顯示，而value則是你想要的樣式值（通常是字符串）。

    看下邊例子：

var divStyle = {
  color: 'white',
  backgroundImage: 'url(' + imgUrl + ')',
  WebkitTransition: 'all', // note the capital 'W' here
  msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};

React.render(<div style={divStyle}>Hello World!</div>, mountNode);

    樣式名稱採用駝峯命名法，是爲了與JS訪問DOM節點是堅持的原則保持一致。除了特定的前綴，除了ms，其它都應該以大寫開頭，這就是上邊例子中WebkitTransition首字母大寫的原因。（我們常用的那些基礎的css還是小寫開頭），當然如果不想單獨寫樣式也可以採用{{}}，來表示樣式：

React.render(<div style={{color:"red"}}>Hello World!</div>, mountNode);

   這裏還有些需要注意的地方，React在訪問像素爲單位的屬性是，它會自動加上“px”。所以有些地方我們可以省略後綴px：

var divStyle = {height: 10}; // rendered as "height:10px"
React.render(<div style={divStyle}>Hello World!</div>, mountNode);

    有時候你想讓你的css保持沒有單位，  那麼就需要注意以下不會自動添加後綴“px”的情況：

• columnCount
• fillOpacity
• flex
• flexGrow
• flexShrink
• fontWeight
• lineClamp
• lineHeight
• opacity
• order
• orphans
• strokeOpacity
• widows
• zIndex
• zoom

二、JSX語法中的if/else

    JSX語法是不支持if/esle的。這是因爲JSX只是函數調用和對象構造的語法糖。看下邊例子：

// This JSX:
React.render(<div id="msg">Hello World!</div>, mountNode);

// Is transformed to this JS:
React.render(React.createElement("div", {id:"msg"}, "Hello World!"), mountNode);

    這意味着 if 語句是不能嵌入的。接着往下看：

// This JSX:
<div id={if (condition) { 'msg' }}>Hello World!</div>

// Is transformed to this JS:
React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!");

    例子彙總從JSX轉換爲JS以後，明顯可以看出已經不是有效的JS，這是應該使用一個三元的表達式來替代：

React.render(<div id={condition ? 'msg' : ''}>Hello World!</div>, mountNode);

    如果你使用三元表達式感覺自己的代碼不夠健壯，你可以在非JSX語法外，使用if來決定用哪個JSX語法塊。

var loginButton;
if (loggedIn) {
  loginButton = <LogoutButton />;
} else {
  loginButton = <LoginButton />;
}

return (
  <nav>
    <Home />
    {loginButton}
  </nav>
)

三、自關閉標籤

    在JSX中，<MyComponent />可以使用，但是<MyComponent>就不行了。所有的標籤都要有結束標誌 / 。
    同時：在JSX中所有的標籤都可以自關閉（所有標籤都可寫成空標籤），如<div />.和<div></div>等價的。

四、JSX的根節點的最大數量

    目前，在一個組件的render方法中，你只能返回一個節點。如果你必須返回多個div，那麼你仍然需要用一個div或者span等其他容器來包容這些div。

    不要忘了JSX要轉換成JS。假設返回兩個JSX的div，相當於返回兩個js函數，就沒有語法意義。同樣的道理，在三元表達式中，也不要使用多於一個的子表達式。

五、children屬性的類型

    通常地，一個組件的children屬性(this.props.children)是一組容器的數組。

var GenericWrapper = React.createClass({
  componentDidMount: function() {
    console.log(Array.isArray(this.props.children)); // => true
  },

  render: function() {
    return <div />;
  }
});

React.render(
  <GenericWrapper><span/><span/><span/></GenericWrapper>,
  mountNode
);

    但是，當該組件中只有一個子標籤的時候，this.props.children僅僅指代這個子標籤本身，而不是一個數組。這可以省略類型轉換。

var GenericWrapper = React.createClass({
  componentDidMount: function() {
    console.log(Array.isArray(this.props.children)); // => false

    // warning: yields 5 for length of the string 'hello', not 1 for the
    // length of the non-existant array wrapper!
    console.log(this.props.children.length);
  },

  render: function() {
    return <div />;
  }
});

React.render(<GenericWrapper>hello</GenericWrapper>, mountNode);

六、輸入框初始值的問題

    爲了控制用戶不能輸入我們可以指定value屬性的值。當然你也有可能遇到一個輸入框需要指定初始值的問題。但是當render渲染到頁面之後，你會發現這個輸入框變得不可編輯了，這種情況下，我們需要將value的值設爲null或undefine。

下邊的例子就展示了這種現象，等到1秒以後，輸入框變得可編輯了。

React.render(<input value="hi" />, mountNode);

setTimeout(function() {
  React.render(<input value={null} />, mountNode);
}, 1000);

 

七、渲染之後不會觸發componentWillReceiveProps

  componentWillReceiveProps 在dom渲染之後是不會被觸發的。這是因爲當初設計的原因。你可以查找其他符合你要求的生命週期方法。

    原因是componentWillReceiveProps經常處理的是舊的（已存在的）屬性更改的邏輯，而不是去在舊屬性不存在的情況下去觸發，也不是去幫助定義什麼方法。