Handling Events
React元素的事件处理非常类似于对DOM元素添加事件处理，但有一部分的语法不同：
1.React事件使用camelCase（驼峰命名法）来进行命名，而不是小写字母
2.JSX需要传递一个函数作为事件处理函数，而不是一个字符串。
//DOM元素的事件处理函数
<button onclick="activateLaser()">
Activate Lasers
</button>
//React元素的事件处理函数
<button onClick={activateLasers} >
Activate Lasers
</button>
3.不能够通过返回一个false来阻止默认操作。必须调用preventDefault
//DOM元素事件处理阻止默认操作
<a href="#" onclick="console.log('The link was clicked.'); return false;">
Click me
</a>
//React元素
function ActionLink() {
//e是事件的各种信息，是根据W3C标准定义的。不需要考虑浏览器兼容问题
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
return (
<a href="#" onClick={handleClick}>
Click me
</a>
)
}
4.在JSX的回调函数中，要注意this的含义，JavaScript中，类方法并不属于任何运行形式，所以如果忘记绑定类的this给事件处理函数的话，那么this在事件处理函数中会变成undefined。如果你不带()来调用一个方法的时候，必须要绑定类的this给事件处理函数。如果这样很麻烦的话，可以使用箭头运算符来定义方法。或者使用箭头运算符来进行回调函数调用。
Conditional Rendering
1.在React中，你可以创建不同的组件，并且渲染其中的一部分，这取决于你应用的状态。状态渲染和JavaScript中的分支运算符有一样的效果，使用JavaScript中的类似if运算符来创建元素来代表当前状态，然后让React更新UI去匹配。
if(this.state.isLogin){
return(
<div>
<Greeting></Greeting>
<button onClick={this.changeState}>修改状态</button>
</div>)
}else{
return(
<div>
<Login></Login>
<button onClick={this.changeState}>修改状态</button>
</div>)
}
2.元素变量可以使用变量来存储元素，可以帮助你在保证其他部分的输出不变的情况下，选择性的渲染一部分组件。
render() {
const isLoggedIn = this.state.isLoggedIn;
let button = null; //通过if条件语句来进行渲染
if (isLoggedIn) {
button = <LogoutButton onClick={this.handleLogoutClick} />
} else {
button = <LoginButton onClick={this.handleLoginClick} />
}
return (
<div>
<Greeting isLoggedIn={isLoggedIn} />
{button}
</div>
);
}
2.使用&&运算符实现行内逻辑
根据JavaScript的语法：true && expression的值永远都是expression，而false && expression的值一直都是false。所以，如果条件表达式的结果为true，那么就会直接返回后面的值，如果结果为false则React会忽略并且跳过后面的表达式。
return (
<div>
<h1>Hello!</h1>
{ unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread messages.
</h2>
}
</div>
);
3.行内if-else条件运算符另外一种实现行内渲染元素中的JavaScript条件表达式的是三目运算符condition ? true : false，下面的代码中使用了三目运算符。
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
The user is <b> {isLoggedIn ? 'currently' : 'not'}</b> logged in.
</div>
);
}
4.阻止组件渲染在小部分情况下，你可能需要让一个元素隐藏。可以让render返回null而不是一个组件。
render() {
return (
<div>
<WarningBanner warn={this.state.showWarning}>
</WarningBanner>
<button onClick={this.handleToggleClick}>
{this.state.showWarning ? 'Hide' : 'Show'}
</button>
</div>
);
}
总结
从上面我们可以学到：
关于Handling Events（事件处理）JSX的语法与JS的四点不同：
1.JSX用驼峰命名事件，JS用小写字母；
2.JSX的事件处理函数语法 {函数名} ，JS为"函数名()"；
3.JSX调用preventDefault()来阻止默认操作，JS则通过return false；
4.JSX的回调函数中，需要绑定类的this给事件函数，
可在初始化时绑定（this.handleLoginClick = this.handleLoginClick.bind(this);）
或在具体使用该函数的地方绑定（{this.handleLoginClick.bind(this)}），
JS不用绑定（onClick="doHandle(this);"），还可以用箭头运算符来定义方法或调用回调函数。
关于Conditional Rendering 可以用变量来存储元素，然后根据流程控制语句以及逻辑运算符
来return需要的变量值，若想阻止渲染则return null。