react學習筆記

背景

1. facebook

特點

1. 聲明式
2. 組件化

高效

1. 虛擬DOM，不總是直接操作dom
2. diff算法，最小化重繪頁面

issues

2. 告訴babel去解析jsx語法

react庫

1. react.js 核心庫
2. babel.min.js 把jsx語法轉爲js語法
3. react-dom.js 提供操作dom的react擴展庫

步驟

1. 創建虛擬dom，React.createElement(‘h1’, {id: “test”}, content)
2. 渲染虛擬dom，ReactDOM.render(virtualDOM, containerDOM)

語法

1. {}
2. {{}} // 裏面的代表是js對象，外邊的代表裏面要寫js語法

模塊與組件化

1. 模塊
   1. 複用js
   2. 一個js文件就是一個模塊
2. 組件
   1. 一個界面的不同部分

組件標籤

1. 首字母大小，大駝峯

定義組件

1. 工廠函數，沒有狀態
   1. Person.propTypes
      1. React.PropTypes.string.isRequired
   2. Person.defaultProps
   3. this.props.propertyName
2. class Test extends React.Component { render() { return } }

組件三大屬性

1. props
2. state
   1. 初始化，constructor
   2. 讀取，this.state
   3. 修改，this.setState
3. refs

this

handleClick() {
  // this
  // 默認不是當前組件對象。指的是undefined
}
render() {
  // this指的是當前組件對象
  // bind 將handleClick方法中的this強制指向當前組件對象
  <h1 onClick="this.handleClick.bind(this)"></h1>
}

PropTypes

refs

1. <input type=‘text’ ref={inp => this.input} />
2. inp 爲當前dom元素
3. this爲當前組件對象
4. 不要過度使用

組件化編寫

1. 拆分組件
2. 實現UI組件
3. 實現動態組件
   1. 初始化數據
   2. 綁定事件
4. 後綴名可以寫.jsx與.js，推薦前者

受控組件

非受控組件

生命週期

1. constructor
2. componentWillMount
3. render
4. componentDidMount
5. componentWillUpdate
   1. render
   2. componentDidUpdate
6. componentWillUnmount

移除組件

1. ReactDOM.unmountComponentAtNode(document.getElementById(‘box’))

腳手架-create-react-app

1. 就是去下載了一個已經存在的項目
2. 包含了所有需要的配置
3. 指定好了所有的依賴
4. npm i create-react-app -g
5. create-react-app project-name

package

1. 開發時依賴，編譯，打包需要，devDependencies
2. 運行時依賴，dependencies
3. 描述當前項目的信息

npm root -g // 查看全局安裝的路徑

請求-axios

1. 在componentDidMount進行

請求-fetch

1. 原生函數
2. 老版本瀏覽器不支持
3. 引入fetch.js兼容低版本瀏覽器
4. 不再使用XmlHttpRequest對象
5. 在IE8+以上的瀏覽器使用fetch是可行的

組件間通信-props

1. props只能一層一層傳遞
2. props可以傳遞一般數據和函數數據

組件間通信-subscribe-publish

1. npm i pubsub-js
2. 類似於vue的this.$emit和this.$on
3. pubSub.publish(‘search’, data)
4. pubSub.subscribe(‘search’, (msg, data) => {})
5. 適用於兄弟組件之間

路由-react-router

<BrowserRouter>
  <App />
</BrowserRouter>

<HashRouter>
  <App />
</HashRouter>

// 替代了之前的a標籤
<NavLink className="" to="/home"></NavLink>
// 優化封裝NavLink
export default class MyNavLink extends Component {
  render() {
    // 將外部傳入的所有屬性傳遞給 NavLink
    return <NavLink {...this.props} activeClassName=""/>
  }
}

// 用 Switch包裹，代表這裏面的路由匹配到纔會顯示
<Switch>
  <Route path="/home" component={HomeComponent} />
  <Redirect to="/home" /> // 地址欄爲 / 加載home組件
</Switch>

8. history對象
9. match對象

this.props.match.params

10. withRouter函數
11. npm i react-router-dom
12. 通過js: this.props.history.push()、this.props.history.replace()、this.props.history.goBack() // 前進、this.props.history.goForward() // 後退

函數組件

1. 單純用來展示數據
2. export default function ShowMessage(props) {return() {}}

UI

1. material-ui（國外）
2. antd-design（國內）
3. https://mobile.ant.design/index-cn