react學習筆記

hy_發表於2019-05-19
React筆記

使用React的語法格式寫JavaScript程式碼，該程式碼的目的是寫網頁的標籤內容，同寫原生的HTML沒有本質的區別，但原生的HTML更新DOM，節點內容，動態樣式等會很不方便，React在這些以及其他更多方面會有優勢。

jsx就是將html標籤寫在js的變數中，這樣js和html就融合在了一起形成了jsx，那只是單純的變數如函式作用域下的變數就是普通的React元素，如果該變數是個函式的返回值或類的render()方法的返回值，則該變數是個React元件。

React其實就是寫HTML標籤到網頁上的，那它怎麼寫呢：
React執行時首先會根據返回的JSX建立對應的Element，用以描述UI介面。然後通過Element則會對應建立元件例項Instance，也就是我們所說的Virtual Dom，最後通過Virtual Dom去對映真實的瀏覽器環境。在首次渲染之後，後序的更新Reac只需要找到(Reconciler)兩次Virtual Dom的差異性(diff)，然後通過diff去更新真實DOM，這樣就實現了增量更新真實DOM，畢竟DOM的操作是非常昂貴的。


純函式不會改變傳入的引數，react 元件也不會改變props，元件擁有自己的狀態用來儲存資料


react元件第一次載入到DOM中，叫掛載，react元件生成的DOM被移除時，叫解除安裝，會對應有生命週期鉤子函式


元件的狀態可以以props的方式傳遞給子元件，這叫做單向資料流
Redux將所有的資料（如state）儲存在一個容器中（store）

store儲存所有物件的狀態，ui元件可以直接從store訪問到特定物件的狀態

ui元件改變狀態，分發一個action（就是將可執行資訊傳送到store）

當store收到action後將這個action代理給相關的reducer

reducer是個純函式，它可以檢視之前的狀態，執行一個action並返回一個新的狀態。


元件訪問store中的state，元件發起一個action，用於改變store中的state

store處理action，讓reducer去處理，reducer處理後更新state，state更新，元件重新渲染。


本來剛學React的時候學狀態管理是學它的，後來公司不用，用Mobx，尷尬只有去學Mobx了，但Redux的思想還是有點價值的:)


props

給類元件新增預設的props，如果在呼叫該元件時沒有傳遞props，則使用props時會用預設值

class Person extends Component {
  render () {
    const { name, age, child } = this.props;
    console.log(name, age, child);
    return <div></div>
  }
}複製程式碼

props的預設值型別可以為js基本型別，引用型別，React元素等

Person.defaultProps = {  name: 'name',  age: 18,  child: <span>child</span>}複製程式碼


React元素：
描述了你希望在螢幕上看到的內容

const app = <div>App</div>複製程式碼

函式元件：

function App(props) {return (<div>{props.name}</div>)}複製程式碼

類元件
class App extends React.Component {

componentDidMount () {}
componentWillUnmount () {}
render () {
return (
<div>{this.props.name}</div>
)
}
}

出於效能考慮，React 可能會把多個 setState() 呼叫合併成一個呼叫
因為 this.props 和 this.state 可能會非同步更新，所以你不要依賴他們的值來更新下一個狀態。
this.setState((state, props) => ({
counter: state.counter + props.counter
})）

不傳引數時定義事件的處理方法
handleClick = (e) => {

}
傳參時：
handleClick (x, y, e) {}

render () {return (<div onClick={this.handleClick.bind(this, id, name)}></div>)}

條件渲染：
render () {
return (
{this.state.show &&
<div>{ this.state.show }</div>
}
)
}
render () {
return (
<div>
{isShow ? (
<button>show</button>
) : (
<button>not show</button>
)
</div>
)
}
render () {
return (
{!this.props.warn && null}
)
}
迴圈渲染：
render () {
return (
{this.props.list.map(item, index) =>
<div key={index}>
<h3></h3>
<div></div>
</div>
}
)
}

受控元件：
<select value={this.state.value} onChange={this.handleChange}>
<option value='red'>red</option>
<option value='yellow'>yellow</option>

狀態提升

將需要共同修改或渲染的狀態提升到共同的父元件中，修改該狀態呼叫父元件傳遞的props中的方法

無障礙輔助功能是使得輔助技術正確解讀網頁的必要條件。

aria-* HTML 屬性
語義化的 HTML

Fragments

import React, { Fragments } from 'react';render () {return ({this.state.list.map(item =><Fragments key={item.id}><div></div><h2></h2></Fragments>)}短語法：render () {return (<><div></div><div></div></>)}複製程式碼


獲取dom結構

class App extends React.Component {  constructor (props) {    super(props);    this.inputInstance = React.createRef();  }focus () {// current獲取 DOM 節點this.inputInstance.current.focus();}render () {<input ref={this.inputInstance} />}}複製程式碼


父元件獲取子元件的 DOM

function children (props) 『

class children extends React.Component {


}


mobx

@observer 的作用是元件使用了mobx的狀態，當狀態發生改變時，元件自動更新。

@observerclass Timer extends Component {    render () {        return (        )    }}複製程式碼

@withRouter 的作用是給非路由匹配渲染的元件的props中新增路由引數：history，location，match，讓它可以實現函式式導航


相關文章