手把手教你學react-初學者

1. 搭建react環境，首先安裝creat-react-app 腳手架。
2. 用creat-react-app 項目名。建立一個react項目.
3. npm i 初始化項目
4. npm start啓動項目

2. 搞清楚react狀態管理state

React是一個狀態機，體現是什麼地方呢，就是體如今state上，經過與用戶的交互，實現不一樣的狀態，而後去渲染UI,這樣就讓用戶的數據和界面保持一致了。state是組件的私有屬性。

state 只能在本組件中去初始化，而且 state 只能被本組件去修改和仿問，不能被外部仿問和修改，因此也能夠說，state 是組件私有的

1. state 狀態初始化。在構造器裏面初始化。

constructor(props) {
   super(props);
   this.state={
      key:value,
      ...
   }
}

2.更新state

注意：setState()是異步的，也就是你調用了setState()以後，React就開始準備去更新了，中間計算會可能會有必定的延時

this.setState({
     key:value
 }) ;

三、調用diff算法
setState()會觸發diff算法最終肯定是否要更新。
每跟新state裏面的數據，render 就會從新執行。~~~~

可讓 setState() 接收一個函數而不是一個對象。這個函數用上一個 state 做爲第一個參數，將這次更新被應用時的 props 作爲第二個參數：~~~~

// Correct
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

1. react 主要是單項數據流，作頁面渲染。

   • 染數據渲染中常常會遇到數據更新，在react中並無相似Vue 的監聽(watch，compute)，常常作這類數據的時候須要在鉤子函數使用[props]數組相似於使用componentDidUpdate裏面完成。
   • 固然如今也有不少包相似watch-props. 建議仍是不要這樣寫。
   • 這樣就將業務邏輯與react生命週期綁定在一塊兒了。不便於管理。Hooks的推出，解決了這樣的問題。

5. React-Hooks

React Hooks 使 規則
爲 保證 Hooks 在使 時 會出現 可預測的問題，官 制定 定要遵循的兩條使 規則( 建議)，在此提早聲
明.

1. 只在函數組件內部最頂層調 Hook， 要在循環、條件判斷或者嵌套函數中調 ;

2. 只能在函數組件中調 Hook( 定義 Hook 中能夠調 Hook)， 要在其餘 JavaScript 函數中調 。**

   • 基礎Hooks API

     • useState （ state 狀態管理，比較好理解）

     • useEffect （ 反作用函數，鉤子函數，componentWillUpdate,componentDidUpdate.）

       • 當 React 渲染組件時，會保存已使用的 effect，並在更新完 DOM 後執行它。這個過程在每次渲染時都會發生，包括首次渲染。
       • 有些反作用可能須要清除，因此須要返回一個函數（相似componentWillUnmount）

     • useContext