React筆記整理

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

一、React是什么？

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

二、React的特點即它與其他js庫相比好在哪里？

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

2、組件化，React順應了web開發組件化趨勢，從UI抽象出不同的組件，方便多次使用

3、提高造作性能，React拋棄html而應用JSX語法，因為DOM操作非常慢，所以引入虛擬DOM的概念

三、React精髓

在虛擬DOM上創建元素，然后將它們渲染到真實DOM上。

四、JSX

注意點：HTML 里的  class 在 JSX 里要寫成  className，因為  class 在 JS 里是保留關鍵字。同理某些屬性比如 for 要寫成  htmlFor。

五、組件

1、組件的初始化

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結構

2、生命周期函數     

裝載組件觸發：

（1）componentWillMount

只會在裝載之前調用一次，在  render 之前調用，你可以在這個方法里面調用  setState 改變狀態，並且不會導致額外調用一次  render

 

（2）componentDidMount

只會在裝載完成之后調用一次，在  render 之后調用，從這里開始可以通過  ReactDOM.findDOMNode(this)獲取到組件的 DOM 節點。

 

更新組件觸發：

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

• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• componentDidUpdate

卸載組件觸發：

componentWillUnmount

3、DOM操作

大部分情況下不需要查詢DOM去更新新組件的UI，只需要通過設置組件的狀態（setState），但是如何直接操作DOM呢？

（1）findDOMNode()

當組件加載到頁面后可以通過findDOMNode（）方法拿到組件對應的DOM元素。

（2）ref

在需要引用的DOM元素上設置一個ref屬性指定一個名稱，然后通過this.refs.name來訪問來訪問對應的DOM元素

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

4、組件詳細說明

static

statics 對象允許你定義靜態的方法，這些靜態的方法可以在組件類上調用；在這個塊兒里面定義的方法都是靜態的，意味着你可以在任何組件實例創建之前調用它們，這些方法不能獲取組件的 props 和 state。如果你想在靜態方法中檢查 props 的值，在調用處把 props 作為參數傳入到靜態方法。

六、表單組件

交互屬性：

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

checked，用於<checkbox> <radio>

selected,用於<option>組件

表單組件可以通過 onChange 回調函數來監聽組件變化。當用戶做出以下交互時，onChange 執行並通過瀏覽器做出響應：

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

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

七、state和props

剛開始接觸時，我的前輩就跟我說React里最重要的就是運用state和props，之前不明白，現在的我對新手說的話也是如此。

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

為了實現交互，我們給組件引進了可變的state。this.state 是組件私有的，可以通過調用 this.setState() 來改變它，當狀態改變時，組件重新渲染自己。

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

1、

這個問題很多見啊，我當時寫我們的AI-4.1列表時，用了Table組件，然后傳進去的column里面也都有了key，但是還是報錯，之后經檢查發現是<a><div>這兩個子元素沒有key來區分，所以分別加了key，然后warning就消失了

 

2、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

3、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- 放在開頭。

 

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