(辦公)探秘react教程20210331

1.create-react-app my-react創建專案
2.npm start啟動專案,專案啟動是localhost:3000埠
3.Props傳遞資料:

    const user = {
    name: "Anna",
    hobbies: ['A','B']
  }
<Home name={"Max"} age={12} user={user}/>
子組件:
    {this.props.name}
                   <p></p>
                   {this.props.age}
                   <ul>
                     {this.props.user.hobbies.map((hobby) => <li key={hobby}>{hobby}</li>)}
                   </ul>

3.1.propType判定傳遞過來得型別:

import PropTypes from "prop-types";
Home.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number,
  user: PropTypes.object
}

3.2.子標簽,也可以通過props.children來獲取并展示:

<Home name={"Max"} age={12} user={user}>
                       <p>I am child</p>
             </Home>

Home組件下:
 <div>
                 {this.props.children}  
              </div> 
PropTypes判定子節點是否傳遞過來:
children: PropTypes.element.isRequired

4.事件

 onMakeOlder() {
      this.age += 3;
      console.log(this.age);
    }
調動事件,事件on后面第一個字母大寫,同時需要系結this
onClick={this.onMakeOlder.bind(this)}
onClick={() => {this.onMakeOlder()}} 箭頭函式
還可以通過constructor構造方法
為了在回呼中使用 `this`，這個系結是必不可少的    this.handleClick = this.handleClick.bind(this);


補充構造方法:
初始化構造方法,類初始化得方法,拿到props,方法引數里寫起來.
    constructor(props){
      super(props);
      this.age = this.props.age
        // 為了在回呼中使用 `this`，這個系結是必不可少的    this.handleClick = this.handleClick.bind(this);
    }  

5.state

state窗臺,通過與用戶的互動，實作不同狀態，然后渲染 UI，讓用戶界面和資料保持一致，React 里，只需更新組件的 state，然后根據新的 state 重新渲染用戶界面
1.在constructor里宣告這個物件
// 初始化構造方法,類初始化得方法,拿到props,方法引數里寫起來.
    constructor(props){
      super(props);
      this.age = this.props.age
        // 為了在回呼中使用 `this`，這個系結是必不可少的    this.handleClick = this.handleClick.bind(this);
        this.state = {
           age: this.props.age
        }
    }
2.展示
 <p>{this.state.age}</p>

3.改變通過事件
     onMakeOlder() {
      this.setState({
        age: this.state.age + 3
      });
      console.log(this.state.age);
    }

6.react更新dom
 虛擬得dom,這個dom和上一個虛擬得dom比較,diff,比較出來結果,找到需要改變得,進行重新渲染.

1.可以在constructor設定一個state得值,然后定時任務只改變一次:
    setTimeout(() => {
          this.setState({
            status: 1
          })
        },3000 )

7.無狀態組件:

有state并且改變,這種叫做有狀態組件.
   無狀態式得組件,也叫做函式式組件
   類方式組件:
   import React,{Component} from "react";

class Header extends Component {
    render(){
        return (
           <div className="container">
             <div className="row">
                 <div className="col-xs-1 col-xs-offset-11">
                   <h1>Header</h1>
                 </div>
              </div> 
           </div>
        )
    }
}

export default Header
  函式式組件(重構):
import React from "react";

const Header = (props) => {
    return (
        <div className="container">
          <div className="row">
              <div className="col-xs-1 col-xs-offset-11">
                <h1>Header</h1>
              </div>
          </div> 
        </div>
    )
}
export default Header

  寫法分為3種:
1.es5: React.createClass
 
    2.es6寫法:React.Component
3.無狀態函式寫法
1.無需state,即不處理用戶得輸入,組件得所有資料都是依賴props傳入得，
2.不需要用到生命周期得函式.
無狀態組件得好處:
  1.不需要宣告類,可以避免大量得譬如extends或者constructor這樣得代碼
  2.無需要顯示得宣告this關鍵字,在ES6得類宣告中往往需要將函式得this關鍵字系結到當前作用域,而因為函式式宣告得特性,我們不需要再強制系結，
 補充無狀態組件是沒有生命周期得,如果需要生命周期,需要高階組件.

8.子組件向父組件傳值:回呼函式來處理

1.父組件定義方法:
     onGreet(age) {
    alert("Hello" + age)
  }

   2.子組件去呼叫,傳遞引數
   handleGreet() {
      this.props.greet(this.state.age)//父組件得方法,傳遞子組件得值.
    }

9.兄弟組件之間得傳遞值

通過父組件就可以:子組件得方法,改變父組件,父組件傳遞給另外一個兄弟組件.

10.雙向資料系結在react中應該如何實作:

常用于表單
   onChange值會變化.
   value得設定會隨著狀態得變化而變化
   DefaultValue可以設定一下默認值
   <input type="text" defaultValue=https://www.cnblogs.com/historylyt/archive/2021/03/31/{this.props.initName}  value=https://www.cnblogs.com/historylyt/archive/2021/03/31/{this.state.initName}  onChange={(event) => this.onHandleChange(event)} /><br/>

onHandleChange(event){
      this.setState({
       homelink: event.target.value
      })
     }

11.組件得生命周期:

組件的生命周期可分成三個狀態：
    Mounting：已插入真實 DOM
    Updating：正在被重新渲染
Unmounting：已移出真實 DOM
   生命周期的方法有:
1.componentWillMount 在渲染前呼叫,在客戶端也在服務端
2.componentDidMount 在第一次渲染后呼叫，只在客戶端，之后組件已經生成了對應的DOM結構，可以通過this.getDOMNode()來進行訪問， 如果你想和其他JavaScript框架一起使用，可以在這個方法中呼叫setTimeout, setInterval或者發送AJAX請求等操作(防止異步操作阻塞UI)，
3.componentWillReceiveProps在組件接收到一個新的 prop (更新后)時被呼叫，這個方法在初始化render時不會被呼叫，
4.shouldComponentUpdate回傳一個布林值，在組件接收到新的props或者state時被呼叫，在初始化時或者使用forceUpdate時不被呼叫， 
可以在你確認不需要更新組件時使用，
5.componentWillUpdate在組件接收到新的props或者state但還沒有render時被呼叫，在初始化時不會被呼叫，
6.componentDidUpdate在組件完成更新后立即呼叫，在初始化時不會被呼叫，
7.componentWillUnmount在組件從 DOM 中移除之前立刻被呼叫，

1.掛載時用得方法(componentWillMount,componentDidMount )
2.更新得時候用得方法(componentWillReceiveProps,
  shouldComponentUpdate,
componentWillUpdate，
  componentDidUpdate
)
3   組件卸載得時候componentWillUnmount
  
第一階段:
1.Constructor
2.componentWillmount
3.render渲染
4.componentDidMount 
  第二階段:
1.componentWillReceiveProps
2.shouldComponentUpdate
3.componentWillUpdate
4.Render()
5.componentDidUpdate

官網,不甚了解得可以上官網去瞅瞅:
https://zh-hans.reactjs.org/docs/handling-events.html

標籤：其他

上一篇：Hexo+Gitee搭建個人博客

下一篇：原型+原型鏈+閉包+立即執行函式+插件開發初識