React筆記整理

大概大半年時間都在用react寫項目，一直在筆記上零零星星地記錄着，在新的一年即將到來之際，打算整理整理髮出來。

1、React是什麼？

React是Facebook開源的用於構建用戶界面的javascript庫。（好些人都覺着React很神祕，接觸新事物時，必定要把它看得簡單，這樣你纔有信心打敗它啊，其實入門真的不難）

2、React的特色即它與其餘js庫相比好在哪裏？

一、專一MVC架構中的V（view），使React很容易和開發者已有的開發棧進行融合

二、組件化，React順應了web開發組件化趨勢，從UI抽象出不一樣的組件，方便屢次使用

三、提升造做性能，React拋棄html而應用JSX語法，由於DOM操做很是慢，因此引入虛擬DOM的概念

3、React精髓

在虛擬DOM上建立元素，而後將它們渲染到真實DOM上。

4、JSX

注意點：HTML 裏的  class 在 JSX 裏要寫成  className，由於  class 在 JS 裏是保留關鍵字。同理某些屬性好比 for 要寫成  htmlFor。

5、組件

一、組件的初始化

gitInitialState

初始化this.state的值，只在組件裝載以前調用一次

可是在ES6中，能夠在構造函數中初始化狀態

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: props.initialCount };
  }
  render() {
    // ...
  }
}

gitDefaultProps

只在組件建立時調用一次並緩存返回的對象

使用 ES6 語法，能夠直接定義 defaultProps 這個類屬性來替代，這樣能更直觀的知道 default props 是預先定義好的對象值：

Counter.defaultProps = { initialCount: 0 };

render

render是必須的，是組裝成這個組件的HTML結構

二、生命週期函數     

裝載組件觸發：

（1）componentWillMount

只會在裝載以前調用一次，在  render 以前調用，你能夠在這個方法裏面調用  setState 改變狀態，而且不會致使額外調用一次  render

 

（2）componentDidMount

只會在裝載完成以後調用一次，在  render 以後調用，從這裏開始能夠經過  ReactDOM.findDOMNode(this)獲取到組件的 DOM 節點。

 

更新組件觸發：

這些方法不會在首次 render 組件的週期調用

• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• componentDidUpdate

卸載組件觸發：

componentWillUnmount

三、DOM操做

大部分狀況下不須要查詢DOM去更新新組件的UI，只須要經過設置組件的狀態（setState），可是如何直接操做DOM呢？

（1）findDOMNode()

當組件加載到頁面後能夠經過findDOMNode（）方法拿到組件對應的DOM元素。

（2）ref

在須要引用的DOM元素上設置一個ref屬性指定一個名稱，而後經過this.refs.name來訪問來訪問對應的DOM元素

不要再render或者render以前訪問refs，不要濫用refs

四、組件詳細說明

static

statics 對象容許你定義靜態的方法，這些靜態的方法能夠在組件類上調用；在這個塊兒裏面定義的方法都是靜態的，意味着你能夠在任何組件實例建立以前調用它們，這些方法不能獲取組件的 props 和 state。若是你想在靜態方法中檢查 props 的值，在調用處把 props 做爲參數傳入到靜態方法。

6、表單組件

交互屬性：

value，用於<input> <textarea> <select>組件

checked，用於<checkbox> <radio>

selected,用於<option>組件

表單組件能夠經過 onChange 回調函數來監聽組件變化。當用戶作出如下交互時，onChange 執行並經過瀏覽器作出響應：

• <input> 或 <textarea> 的 value 發生變化時。
• <input> 的 checked 狀態改變時。
• <option> 的 selected 狀態改變時。

類型爲  radio、 checkbox 的 <input> 支持  defaultChecked 屬性，  <select> 支持  defaultValue 屬性。

7、state和props

剛開始接觸時，個人前輩就跟我說React裏最重要的就是運用state和props，以前不明白，如今的我對新手說的話也是如此。

組件先根據本身的props渲染一次本身，props是不可變的，它們從父節點傳遞過來，被父節點擁有。

爲了實現交互，咱們給組件引進了可變的state。this.state 是組件私有的，能夠經過調用 this.setState() 來改變它，當狀態改變時，組件從新渲染本身。

8、React的使用過程當中遇到的warning報錯錦集

一、

這個問題不少見啊，我當時寫咱們的AI-4.1列表時，用了Table組件，而後傳進去的column裏面也都有了key，可是仍是報錯，以後經檢查發現是<a><div>這兩個子元素沒有key來區分，因此分別加了key，而後warning就消失了

 

二、vendor.js:1658 Warning: Notice: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://fb.me/react-special-props)

出錯場景：notice提示組件的出現隱藏

爲了區分，傳遞了一個惟一標實的參數key，可是從文檔信息看：

attempting to access this.props.key from a component (eg. the render function) is not defined. If you need to access the same value within the child component, you should pass it as a different prop (ex: <ListItemWrapper key={result.id} id={result.id} />). 

 

 

因而咱們改爲經過傳遞id就能夠了

PS：React中有兩個比較特殊的參數：ref 和 key，不會被傳遞到組件

Most props on a JSX element are passed on to the component, however, there are two special props (ref and key) which are used by React, and are thus not forwarded to the component

三、vendor-6a78e5c….js:1698 Warning: Unknown prop `place` on <i> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop

    in i (created by Rules (bindStores))
    in div (created by Rules (bindStores))
    in div (created by Rules (bindStores))

<i style={{float:'right',marginRight:'7px'}} data-tip={__('僅供查詢報警對象名稱')} place="top" className="iconfont tips">&#xe651;</i>

即一些自定義的元素，最好使用 data- 放在開頭。

 

好了，本人不才，先到此爲止。