1.創建組件
第一種方式
注意： 組件名字首字母大寫
function Helloworld (props) {
return <h1>名字`${props.name}`</h1>
}
const element =
reactDom.render(
element,
document.getElementById('exanple')
)
第二種方式
class Helloworld extends React.Component{
????render() {
????????return <h1> hello world</h1>
????????}
}
2.React state
添加一個類構造函數來初始化狀態this.state,類組件始終使用props調用基礎構造函數
數據形式為? 自頂向下或單項數據流。除擁有或者設置它的組件外，其他組件不可訪問
3.React Props
state和props最主要的區別在于 props是不可變的，而state可以根據與用戶交互來改變。
可以通過組建類的defaultProps來設置props的默認值
可以在父組件中設置state，在子組件中通過props傳遞，如下
可以使用propTypes 來設置props的類型，用于校驗
4.react的事件處理
1.寫法? 需要寫成? onclick = {fun} 的形式
2.不能通過return false 的形式來阻止默認行為? ，必須明確使用 e.preventdefault();
3.this 指向問題
向事件處理函數傳遞參數
5.react條件渲染
沒啥特別要記的
6.react列表和 keys
Keys 可以在 DOM 中的某些元素被增加或刪除的時候幫助 React 識別哪些元素發生了變化。因此你應當給數組中的每一個元素賦予一個確定的標識。
7.react組件 api
設置狀態setState：
更新state的狀態時候要調用setState()方法，不可以直接更改? ，setState為異步方法，并且會出發一次足見重繪，除非在shouldComponentUpdate()中實現了一些條件渲染邏輯
形式為：setState(object nextState, function callback)
????參數說明：
? ??nextState，將要設置的新狀態，該狀態會和當前的state合并
? ??callback，可選參數，回調函數。該函數會在setState設置成功，且組件重新渲染后調用。
替換狀態replaceState：
?replaceState(object nextState, function callback)
? ??nextState，將要設置的新狀態，該狀態會替換當前的state。
? ??callback，可選參數，回調函數。該函數會在replaceState設置成功，且組件重新渲染后調用
同理還有? 設置屬性?setProps? 和替換屬性 replaceProps
強制更新：forceUpdate
獲取DOM節點：findDOMNode??
? ? 用處：獲取表單字段的值和做一些dom操作
8.react組件的生命周期
componentWillMount?在渲染前調用,在客戶端也在服務端。
componentDidMount?: 在第一次渲染后調用，只在客戶端。之后組件已經生成了對應的DOM結構，可以通過this.getDOMNode()來進行訪問。 如果你想和其他JavaScript框架一起使用，可以在這個方法中調用setTimeout, setInterval或者發送AJAX請求等操作(防止異步操作阻塞UI)。
componentWillReceiveProps?在組件接收到一個新的 prop (更新后)時被調用。這個方法在初始化render時不會被調用。
shouldComponentUpdate?返回一個布爾值。在組件接收到新的props或者state時被調用。在初始化時或者使用forceUpdate時不被調用。 （可以通過這個方法控制組件是否重新渲染。如果返回?false?組件就不會重新渲染。這個生命周期在 React.js 性能優化上非常有用。）
可以在你確認不需要更新組件時使用。
componentWillUpdate在組件接收到新的props或者state但還沒有render時被調用。在初始化時不會被調用。
componentDidUpdate?在組件完成更新后立即調用。在初始化時不會被調用。
componentWillUnmount在組件從 DOM 中移除之前立刻被調用。
9.React AJAX
ajax請求放在?componentDidMount? ? 內實現
10.?
11. react 表單
react 表單好麻煩的哦哦，，，，（單向數據流最大的弊端了吧，，，，）
/--------------------------------react 小書-----------------------------/
12. 容器類組件
? 1）組件按正常層級寫，組件內的內容會根據 props.children 來獲取到。
2.?設置?innerHTML?可能會導致跨站腳本攻擊（XSS），所以一般情況下不使用這個嵌入html標簽，但是想要嵌入的話可以使用 dangerouslySetInnerHTML={{__html: this.state.content}}
3.style? ?
? ? react 接受一個對象來設置樣式，style = {{color: 'red', fontSize: this.state.font}}
4.高階組件
? ? 概念：高階組件就是一個函數，傳給它一個組件，返回一個新組件。（注意是一個函數）
高階組件實就是為了組件之間的代碼復用。組件可能有著某些相同的邏輯，把這些邏輯抽離出來，放到高階組件中進行復用。高階組件內部的包裝組件和被包裝組件之間通過?props?傳遞數據。
高階組件，可以封裝獲取LocalStorage的高階組件，避免其他組件內重復再寫讀取LocalStorage的函數（自己： 不用redux的時候可以這么做，也可以直接用redux）
5.react的 context 也可以實現在祖組件中聲明，其他子組件或者孫子組件也可以訪問的效果，類似與全局變量，修改后其他引用的地方也被改動，redux的原理也是依照這種思想，但是react并不推崇這種寫法，擔心全局變量污染。（個人覺得：應該使用合適的話會比props方便的多）
6. redux 是為了大張旗鼓的告訴別人我要修改數據！！！ 通過dispatch
