React 筆記一：簡單串講
github源碼在此淘邻，記得點(diǎn)星:
https://github.com/brandonxiang/example-react
介紹
可以說React是非常裝逼的前端工具，學(xué)習(xí)成本也相對較高熬荆。因?yàn)樗蚭s6和webpack都相互結(jié)合的很好共屈。所以在學(xué)react之前要學(xué)習(xí)babel和webpack等等，學(xué)了react之后又要學(xué)redux，react-router，還有很多周邊的組件流强。
組件生態(tài)
知乎上很多人討論react，angular和vue的問題呻待。
我個(gè)人認(rèn)為選擇react的原因一定是它的組件生態(tài)煮盼，詳情參考awesome-react-components。相比之下带污，angular的生態(tài)其實(shí)也不錯(cuò)，但是angular2的斷裂式升級香到，以及angular1的臟類型的問題鱼冀，還有angular2的功能完善。這些都讓我很難喜歡angular悠就。vue比較適合“單打獨(dú)斗”的小項(xiàng)目千绪。
入門教程
React 入門實(shí)例教程講解了render的思想，JSX的語法梗脾，組件的構(gòu)成荸型，props和state等等。
數(shù)據(jù)綁定
state 和 props炸茧，兩個(gè)專有的說法瑞妇。props更多是屬性的單項(xiàng)綁定，也可以是子組件的參數(shù)梭冠。而state是狀態(tài)機(jī)辕狰，可以實(shí)現(xiàn)雙向綁定，數(shù)據(jù)交互控漠。
例子
創(chuàng)建一個(gè)簡單React的demo蔓倍，方法有很多，這里說一個(gè)簡單腳手架create-react-app盐捷。
npm install -g create-react-app
create-react-app my-app
另外偶翅，就是采用yo模板構(gòu)建工具generator-react-webpack。一口氣完成react碉渡，webpack以及postcss模板生成聚谁。并且生成了單元測試代碼
兩種寫法
參考React Native 中 ES6+ 和 ES5 語法比較
es5 方法寫法
這種寫法相對傳統(tǒng)，有點(diǎn)es5的意思滞诺。初始化使用方法getInitialState垦巴。
var Hello = React.createClass({
render() {
return <h1>Hello, world</h1>;
}
})
export default Hello
es6類寫法
用es6的寫法媳搪，新穎而親切。初始化使用方法constructor骤宣。
export default class Hello extends Component{
render() {
return <h1>Hello, world</h1>;
}
}
兩者之間的區(qū)別詳情參考React.createClass versus extends React.Component秦爆。
PropType
生命周期
我個(gè)人感覺這是一個(gè)難點(diǎn)，渲染周期的方法憔披，重寫該方法可以實(shí)現(xiàn)在dom周期中的一些功能等限，緊密把握著dom的一些功能實(shí)現(xiàn)，有點(diǎn)像jquery的感覺芬膝。對生命周期的把握望门，可以實(shí)現(xiàn)很多邏輯的功能。
-
componentWillUnmount()
插入真實(shí) DOM之前 -
componentDidMount()
完成插入真實(shí) DOM -
componentWillUpdate()
更新真實(shí) DOM之前 -
componentDidUpdate()
完成更新真實(shí) DOM -
componentWillUnmount()
移除真實(shí)DOM之前 -
componentWillReceiveProps()
插入DOM后的Props被更新 -
shouldComponentUpdate()
當(dāng)新的props和state接受后dom渲染之前锰霜，不會再初次渲染和forceUpdate()使用的時(shí)候
入門坑
How I Fixed: Warning: React.createElement: type should not be null, undefined, boolean, or number.
Module not found: Error: Cannot resolve module 'react/lib/ReactMount' in
參考
轉(zhuǎn)載筹误，請表明出處。總目錄前端經(jīng)驗(yàn)收集器
