本文翻译自官方文档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”的情况：
columnCountfillOpacityflexflexGrowflexShrinkfontWeightlineClamplineHeightopacityorderorphansstrokeOpacitywidowszIndexzoom
二、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经常处理的是旧的（已存在的）属性更改的逻辑，而不是去在旧属性不存在的情况下去触发，也不是去帮助定义什么方法。
