一、JSX 語法
1.在 JSX 中嵌入表達式：
在 JSX 中嵌入表達式，必須用{}將表達式括起來。
var element = <h1>Hello, world!</h1>;
<h1> Hello { 1 + 3 }</h1>;
2.JSX 中為 element 指定屬性值。
- 通過字符串的形式
- 通過{表達式}的形式
二、函數式組件
定義一個函數式組件：
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
使用：
<Welcome name = "world"/>
三、類組件
class Welcome extends React.Component{
render(){
return(
<h1>Hello, {props.name}</h1>;
);
}
}
使用：
<Welcome name = "world"/>
對比：
函數式組件和類組件的名稱首字母必須大寫。所有組件的首字母都是大寫的。元素是小寫。
函數式組件的函數是純函數。
函數式組件沒有 state狀態機變量，渲染的內容只能靠 props 來決定。
純函數：相同的輸入一定得到相同的輸出。
四、狀態機變量 state 的正確使用
1、取值
this.state.comment;
2、修改
this.setState({comment:"Hello"});
不能直接修改：
this.state.comment = "Hello";
直接賦值形式只能在構造函數 constructor 中使用。
3、setState()函數
setState()函數接受兩種形式的對象。
- 普通的對象
this.setState({comment:"Hello"});
- 箭頭函數對象,箭頭函數的參數，參數1是上個狀態的 state，參數2是更新時的 props 屬性
this.setState((prevState,props) =>({
comment:prevState.comment + `{props.name}`
});
- 也可以是常規函數
this.setState(function(prevState,props){
return {comment:prevState.comment + `{props.name}`};
});
函數對象的參數可選的。
4、state狀態的變量是合并而不是覆蓋。
就是 setState()函數只會設置對應的變量不影響其他變量。
函數事件需要綁定的原因分析：
ES6中 function var 聲明的變量是全局變量。
五、條件渲染
布爾值 && 表達式
布爾值為 false，直接忽略渲染。
布爾值為 true，返回表達式的渲染。
布爾值 ? 表達式1 : 表達式2
布爾值為 true 時，渲染表達式1
布爾值為 false 時，渲染表達式2
六、阻止渲染
Booleans, Null, 和 Undefined 被忽略
以下等價:
<div />
<div></div>
<div>{false}</div>
<div>{null}</div>
<div>{undefined}</div>
<div>{true}</div>
七、屬性擴展
如果你已經有一個 object 類型的 props，并且希望在 JSX 中傳入，你可以使用擴展操作符 ... 傳入整個 props 對象。這兩個組件是等效的：
function App1() {
return <Greeting firstName="Ben" lastName="Hector" />;
}
function App2() {
const props = {firstName: 'Ben', lastName: 'Hector'};
return <Greeting {...props} />;
}
當你構建一個一般容器時，屬性擴展非常有用。然而，這可能會使得你的代碼非常混亂，因為這非常容易使一些不相關的 props(屬性) 傳遞給組件，而組件并不需要這些 props(屬性) 。因此我們建議謹慎使用該語法。
八、通過 PropTypes 進行類型檢查
import PropTypes from 'prop-types';
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
// 類型檢查
Greeting.propTypes = {
name: PropTypes.string
};
// 指定 props 的默認值：
Greeting.defaultProps = {
name: 'Stranger'
};
類型檢查
MyComponent.propTypes = {
// 你可以聲明一個 prop 是一個特定的 JS 原始類型。
// 默認情況下，這些都是可選的。
optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,
// 任何東西都可以被渲染:numbers, strings, elements,或者是包含這些類型的數組(或者是片段)。
optionalNode: PropTypes.node,
// 一個 React 元素。
optionalElement: PropTypes.element,
// 你也可以聲明一個 prop 是類的一個實例。
// 使用 JS 的 instanceof 運算符。
optionalMessage: PropTypes.instanceOf(Message),
// 你可以聲明 prop 是特定的值，類似于枚舉
optionalEnum: PropTypes.oneOf(['News', 'Photos']),
// 一個對象可以是多種類型其中之一
optionalUnion: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.instanceOf(Message)
]),
// 一個某種類型的數組
optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
// 屬性值為某種類型的對象
optionalObjectOf: PropTypes.objectOf(PropTypes.number),
// 一個特定形式的對象
optionalObjectWithShape: PropTypes.shape({
color: PropTypes.string,
fontSize: PropTypes.number
}),
// 你可以使用 `isRequired' 鏈接上述任何一個，以確保在沒有提供 prop 的情況下顯示警告。
requiredFunc: PropTypes.func.isRequired,
// 任何數據類型的值
requiredAny: PropTypes.any.isRequired,
// 你也可以聲明自定義的驗證器。如果驗證失敗返回 Error 對象。不要使用 `console.warn` 或者 throw ，
// 因為這不會在 `oneOfType` 類型的驗證器中起作用。
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
},
// 也可以聲明`arrayOf`和`objectOf`類型的驗證器，如果驗證失敗需要返回Error對象。
// 會在數組或者對象的每一個元素上調用驗證器。驗證器的前兩個參數分別是數組或者對象本身，
// 以及當前元素的鍵值。
customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
if (!/matchme/.test(propValue[key])) {
return new Error(
'Invalid prop `' + propFullName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
})
}
九、Refs 和 DOM
在 DOM 元素上添加 Ref
React 支持給任何組件添加特殊屬性。ref 屬性接受回調函數，并且當組件 裝載(mounted) 或者 卸載(unmounted) 之后，回調函數會立即執行。
當給 HTML 元素添加 ref 屬性時， ref 回調接受底層的 DOM 元素作為參數。例如，下面的代碼使用ref 回調來存儲 DOM 節點的引用。
class CustomTextInput extends React.Component {
constructor(props) {
super(props);
this.focus = this.focus.bind(this);
}
focus() {
// 通過使用原生API，顯式地聚焦text輸入框
this.textInput.focus();
}
render() {
// 在實例中通過使用`ref`回調函數來存儲text輸入框的DOM元素引用(例如:this.textInput)
return (
<div>
<input
type="text"
ref={(input) => { this.textInput = input; }} />
<input
type="button"
value="Focus the text input"
onClick={this.focus}
/>
</div>
);
}
}
為 類(Class) 組件添加 Ref
當 ref 屬性用于類(class)聲明的自定義組件時，ref 回調函數收到的參數是裝載(mounted)的組件實例。例如，如果我們想包裝 CustomTextInput 組件，實現組件在 裝載(mounted) 后立即點擊的效果:
class AutoFocusTextInput extends React.Component {
componentDidMount() {
this.textInput.focus();
}
render() {
return (
<CustomTextInput
ref={(input) => { this.textInput = input; }} />
);
}
}
需要注意的是，這種方法僅對以類(class)聲明的 CustomTextInput 有效：
class CustomTextInput extends React.Component {
// ...
}
舊版API: String 類型的 Refs
如果你之前使用過 React ，你可能了解過之前的API中的 string 類型的 ref 屬性。類似于 "textInput" ，可以通過 this.refs.textInput 訪問DOM節點。我們不建議使用，因為string類型的 refs 存在問題。已經過時了，可能會在未來的版本是移除。如果你目前還在使用 this.refs.textInput 這種方式訪問 refs ，我們建議用回調函數的方式代替。
后面內容全部來自談一談創建React Component的幾種方式
1.createClass
如果你還沒有使用ES6語法，那么定義組件，只能使用React.createClass這個helper來創建組件，下面是一段示例：
var React = require("react");
var Greeting = React.createClass({
propTypes: {
name: React.PropTypes.string //屬性校驗
},
getDefaultProps: function() {
return {
name: 'Mary' //默認屬性值
};
},
getInitialState: function() {
return {count: this.props.initialCount}; //初始化state
},
handleClick: function() {
//用戶點擊事件的處理函數
},
render: function() {
return <h1>Hello, {this.props.name}</h1>;
}
});
module.exports = Greeting;
這段代碼，包含了組件的幾個關鍵組成部分，這種方式下，組件的props、state等都是以對象屬性的方式組合在一起，其中默認屬props和初始state都是返回對象的函數，propTypes則是個對象。這里還有一個值得注意的事情是，在createClass中，React對屬性中的所有函數都進行了this綁定，也就是如上面的hanleClick其實相當于handleClick.bind(this)
。
2.component
因為ES6對類和繼承有語法級別的支持，所以用ES6創建組件的方式更加優雅，下面是示例：
import React from 'react';
class Greeting extends React.Component {
constructor(props) {
super(props);
this.state = {count: props.initialCount};
this.handleClick = this.handleClick.bind(this);
}
//static defaultProps = {
// name: 'Mary' //定義defaultprops的另一種方式
//}
//static propTypes = {
//name: React.PropTypes.string
//}
handleClick() {
//點擊事件的處理函數
}
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
Greeting.propTypes = {
name: React.PropTypes.string
};
Greeting.defaultProps = {
name: 'Mary'
};
export default Greating;
可以看到Greeting繼承自React.component,在構造函數中，通過super()來調用父類的構造函數，同時我們看到組件的state是通過在構造函數中對this.state進行賦值實現，而組件的props是在類Greeting上創建的屬性，如果你對類的屬性和對象的屬性的區別有所了解的話，大概能理解為什么會這么做。對于組件來說，組件的props是父組件通過調用子組件向子組件傳遞的，子組件內部不應該對props進行修改，它更像是所有子組件實例共享的狀態，不會因為子組件內部操作而改變，因此將props定義為類Greeting的屬性更為合理，而在面向對象的語法中類的屬性通常被稱作靜態(static)屬性，這也是為什么props還可以像上面注釋掉的方式來定義。對于Greeting類的一個實例對象的state，它是組件對象內部維持的狀態，通過用戶操作會修改這些狀態，每個實例的state也可能不同，彼此間不互相影響，因此通過this.state來設置。
用這種方式創建組件時，React并沒有對內部的函數，進行this綁定，所以如果你想讓函數在回調中保持正確的this，就要手動對需要的函數進行this綁定，如上面的handleClick，在構造函數中對this 進行了綁定。
3.PureComponet
我們知道，當組件的props或者state發生變化的時候：React會對組件當前的Props和State分別與nextProps和nextState進行比較，當發現變化時，就會對當前組件以及子組件進行重新渲染，否則就不渲染。有時候為了避免組件進行不必要的重新渲染，我們通過定義shouldComponentUpdate來優化性能。例如如下代碼：
class CounterButton extends React.Component {
constructor(props) {
super(props);
this.state = {count: 1};
}
shouldComponentUpdate(nextProps, nextState) {
if (this.props.color !== nextProps.color) {
return true;
}
if (this.state.count !== nextState.count) {
return true;
}
return false;
}
render() {
return (
<button
color={this.props.color}
onClick={() => this.setState(state => ({count: state.count + 1}))}>
Count: {this.state.count}
</button>
);
}
}
shouldComponentUpdate通過判斷props.color和state.count是否發生變化來決定需不需要重新渲染組件，當然有時候這種簡單的判斷，顯得有些多余和樣板化，于是React就提供了PureComponent來自動幫我們做這件事，這樣就不需要手動來寫shouldComponentUpdate了：
class CounterButton extends React.PureComponent {
constructor(props) {
super(props);
this.state = {count: 1};
}
render() {
return (
<button
color={this.props.color}
onClick={() => this.setState(state => ({count: state.count + 1}))}>
Count: {this.state.count}
</button>
);
}
}
大多數情況下， 我們使用PureComponent能夠簡化我們的代碼，并且提高性能，但是PureComponent的自動為我們添加的shouldComponentUpate函數，只是對props和state進行淺比較(shadow comparison)，當props或者state本身是嵌套對象或數組等時，淺比較并不能得到預期的結果，這會導致實際的props和state發生了變化，但組件卻沒有更新的問題，例如下面代碼有一個ListOfWords組件來將單詞數組拼接成逗號分隔的句子，它有一個父組件WordAdder讓你點擊按鈕為單詞數組添加單詞，但他并不能正常工作：
class ListOfWords extends React.PureComponent {
render() {
return <div>{this.props.words.join(',')}</div>;
}
}
class WordAdder extends React.Component {
constructor(props) {
super(props);
this.state = {
words: ['marklar']
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
// 這個地方導致了bug
const words = this.state.words;
words.push('marklar');
this.setState({words: words});
}
render() {
return (
<div>
<button onClick={this.handleClick} />
<ListOfWords words={this.state.words} />
</div>
);
}
}
這種情況下，PureComponent只會對this.props.words進行一次淺比較，雖然數組里面新增了元素，但是this.props.words與nextProps.words指向的仍是同一個數組，因此this.props.words !== nextProps.words 返回的便是flase，從而導致ListOfWords組件沒有重新渲染,筆者之前就因為對此不太了解，而隨意使用PureComponent，導致state發生變化，而視圖就是不更新，調了好久找不到原因~。
最簡單避免上述情況的方式，就是避免使用可變對象作為props和state，取而代之的是每次返回一個全新的對象,如下通過concat來返回新的數組：
handleClick() {
this.setState(prevState => ({
words: prevState.words.concat(['marklar'])
}));
}
你可以考慮使用Immutable.js來創建不可變對象，通過它來簡化對象比較，提高性能。
這里還要提到的一點是雖然這里雖然使用了Pure這個詞，但是PureComponent并不是純的，因為對于純的函數或組件應該是沒有內部狀態，對于stateless component更符合純的定義，不了解純函數的同學，可以參見這篇文章。
4.Stateless Functional Component
上面我們提到的創建組件的方式，都是用來創建包含狀態和用戶交互的復雜組件，當組件本身只是用來展示，所有數據都是通過props傳入的時候，我們便可以使用Stateless Functional Component來快速創建組件。例如下面代碼所示:
import React from 'react';
const Button = ({
day,
increment
}) => {
return (
<div>
<button onClick={increment}>Today is {day}</button>
</div>
)
}
Button.propTypes = {
day: PropTypes.string.isRequired,
increment: PropTypes.func.isRequired,
}
這種組件，沒有自身的狀態，相同的props輸入，必然會獲得完全相同的組件展示。因為不需要關心組件的一些生命周期函數和渲染的鉤子，所以不用繼承自Component顯得更簡潔。
對比
createClass vs Component
對于React.createClass
和
extends React.Component本質上都是用來創建組件，他們之間并沒有絕對的好壞之分，只不過一個是ES5的語法，一個是ES6的語法支持，只不過createClass支持定義PureRenderMixin,這種寫法官方已經不再推薦，而是建議使用PureComponent。
pureComponent vs Component
通過上面對PureComponent和Component的介紹，你應該已經了解了二者的區別:PureComponent已經定義好了shouldUpdateComponent而Component需要顯示定義。
Component vs Stateless Functional component
Component包含內部state，而Stateless Functional Component所有數據都來自props，沒有內部state;-
Component包含的一些生命周期函數，
Stateless Functional Component都沒有，因為Stateless Functional component沒有shouldComponentUpdate,所以也無法控制組件的渲染，也即是說只要是收到新的props，Stateless Functional Component就會重新渲染。 -
Stateless Functional Component<a style="box-sizing: border-box; background: transparent; color: rgb(0, 154, 97); text-decoration: none; outline: 0px; border-bottom: 1px solid rgba(0, 154, 97, 0.25); padding-bottom: 1px;">不支持Refs</a>
選哪個？
這里僅列出一些參考:
createClass， 除非你確實對ES6的語法一竅不通，不然的話就不要再使用這種方式定義組件。
Stateless Functional Component, 對于不需要內部狀態，且用不到生命周期函數的組件，我們可以使用這種方式定義組件，比如展示性的列表組件，可以將列表項定義為Stateless Functional Component。
PureComponent/Component，對于擁有內部state，使用生命周期的函數的組件，我們可以使用二者之一，但是大部分情況下，我更推薦使用PureComponent，因為它提供了更好的性能，同時強制你使用不可變的對象，保持良好的編程習慣。
