React元件及應用

React元件名首字母必須為大寫

一、元件型別

（一）函式元件

• 函式元件（無狀態元件，UI元件）：
  是一個純函式，只用元件展示，元件只負責根據外部傳入的 props 來展示，書寫更簡潔，執行效率更高（推薦）
  預設沒有this

>例子：
function Home(){
        return(
               < div></ div>
        )
}
函式內必須要有return

(二)類元件

• 類元件（狀態元件）
  （狀態就是一些可變的資料，當資料改變，就會自動重新整理元件：重新執行一遍render）
  類元件有更豐富的特性，如：state 狀態、生命週期、this 等

>例子：
class Nav extends React.Component{
        render(){
                   return (
                           < div></ div>
                   )
          }
}
必須繼承自React.Component
必須包含render(){}方法

• React 類元件擁有自己的狀態 state，state 狀態改變時自動重新整理元件（執行元件中的 render 方法）

>例子：
class Nav extends React.Component{
      constructor() {
                super(); // 呼叫super後才能使用this
                this.state = { }
       }
        render(){
                   return (
                           < div></ div>
                   )
          }
}

• 獲取：this.state.xxx
• 修改: this.setState()
  修改state的原則：建立一個新的資料並覆蓋它

this.setState({
datalist:newData
})

• 預設只有construtor、render、生命週期函式中可以直接使用this，自定義的函式需要手動繫結（下面會進行優化）

> 例子：
class Nav extends React.Component{
      constructor() {
                super(); // 呼叫super後才能使用this
                this.state = { }

         // 給自定義函式繫結this
         this.addItem = this.addItem.bind(this);
       }
    //自定義方法
    addItem(text){
                const {datalist} = this.state;
                this.setState({
                    datalist:newData
                })
            }
        render(){
                   return (
                           <div>
                                  <TodoForm addItem={this.addItem} />
                           </div>
                   )
          }}

(三)受控元件與非受控元件

• 受控元件：表單元素的值與元件的state進行繫結
• 非受控元件：傳統節點操作

二、元件通訊

• props：類元件與函式元件都適用

函式元件：通過函式的第一個引數訪問|
類元件：通過this.props訪問
(類元件中的 constructor的第一個引數也是Props : constructor(props) {})

(一)父子通訊：props

1、父傳子：props

（1）父元件操作：給子元件定義屬性並傳遞資料

例子：
function TodoList() {
      let datalist = [
         { id: 1,
            text: "早點睡覺",
            done: false,
            date: new Date()
         },
      ]
         return (
            <div>
               <TodoContent datalist={datalist} />
               <TodoForm />
            </div>
         )
      }

（2）子元件操作

• 函式元件：函式的第一個引數為props

例子：
function TodoContent(props) {
         return (
                  { props.datalist.map((item) => {
                        return <TodoItem item={item} />
                     })
                  }
         )
 }

• 類元件：this.props

例子：
class TodoForm extends React.Component{
      constructor(props) {
                super(); // 呼叫super後才能使用this
                this.state = { }
       }
         submitItem() {
            if (this.state.text) {  // 對文字框有無值進行判斷
               this.props.addItem(this.state.text); //傳輸文字框中的值
               this.setState({
                  text: '', //清空文字框
               })
            } else {}
        render(){
                   return (
                           <div>
                                 <button onClick={this.submitItem}>確定</button>
                           </div>
                   )
          }
}

2、子傳父:props（把父元件的方法通過props傳遞到子元件中執行）

（1）父元件操作：給子元件定義屬性並傳遞方法

例子：
function TodoList() {
      let datalist = [
         { id: 1,
            text: "早點睡覺",
            done: false,
            date: new Date()
         },
      ]
          removeItem(id) {}  //方法
         return (
            <div>
               <TodoContent  removeItem={this.removeItem}  />
            </div>
         )
      }

(2)子元件操作：執行傳入的方法並傳遞資料

例子:
function TodoItem({ item, removeItem}) {
         return (
            <tr>
               <td>
                  <button onClick={removeItem.bind(null, item.id)}>刪除</button>
               </td>
            </tr>
         )
      }

(二)兄弟元件通訊：狀態提升

• 把狀態（資料）放到兩個元件共同的父級

（三）多層次元件通訊

1、props 逐層傳遞（不推薦）

• 從上到下，所有的元件都要幫助傳遞這個 props 到目標位置
• 缺點：操作繁瑣、難以維護

2、context 元件共享

所謂 context，就是上下文環境，某個元件只要往自己的 context 裡面放了某些狀態，這個元件之下的所有子元件都能直接訪問這個狀態，實現步驟如下：

(1)第一步：建立 Context：

let defaultValue = { username: "laoxie" };
**let MyContext = React.createContext(defaultValue);**

MyContext.Provider，如父元件沒有共享資料，子元件獲取時得到初始化資料

(2)第二步：父元件共享資料（ Provider）

• 父元件往Context中存入資料並提供給它的子元件使用

• let data = {username:‘jingjing’}
  <MyContext.Provider value={data} >
  < App/>
  </MyContext.Provider>

• 元件App下的所有子元件都能獲取到data資料，如父元件未設定 Provider，子元件接收時得到 defaultValue 的值

(3)第三步：子元件接收資料

• Consumer

<MyContext.Consumer>
  {
          (value) => {
              return(
                      //各個子元件跟資料
               )
             // 回撥函式中獲取value值
          }
   }
</MyContext.Consumer>

• ContextType

只適用於類元件，需要給類元件新增一個靜態屬性
例子：
class TodoForm extends Reaact.Component{
        //this.context
}
TodoForm.contextType = MyContext

只適用於類元件，通過this.context獲取
SubComponent.contextType = MyContext;
this.context.username; //jingjing