react 語法小知識

創建好了react項目結構之後，就需要我們寫一堆的組件了，目前react組件有兩種常用的寫法：

1，函數組件：

import React from 'react';
function LogIn(props){
    return(
        <button>登錄</button>
    )
}
export default LogIn;

2，class組件：

import React from 'react';
class LoginControl from React.Component{
   constructor(props){
        //數據初始化
        super(props);
        
    }
    componentWillMount(){
        //數據已經初始化，但是還沒有渲染dom,一般很少用
    }

    componentDidMount(){
        //第一次渲染dom,在這裏可以請求ajax,並setDate重新渲染數據


    }
    componentWillReceiveProps(){
        //在接受父組件改變後的props需要重新渲染組件時用的比較多

    }
    componentWillUnmount(){
        //卸載和數據銷燬
    }
    render() {
        /*js處理*/
        return (
            <div>
               
            </div>
        )
    }
}
export default HomePage1;

相信JSX渲染都不會陌生了，這裏就不多說了，直接用{}大花括號渲染就行了， 注意必須是有效的 JavaScript 表達式。

接下來我重點說明一點，在react中的事件處理，以及props這個重要的屬性，還有就是子父組件之間的如何使用以及如何傳遞參數等。以下基於class組件：

拿官網給的登錄，退出來爲例：

首先寫個登錄和退出的小組件：

登錄：
import React from 'react';
function LogIn(props){
    console.log(props)
    return(
        <button onClick={props.onClick}>登錄</button>
    )
}
export default LogIn;

退出：
import React from 'react';
function LogOut(props){
    console.log(props)
    return(
        <button onClick={props.onClick}>退出</button>
    )
}
export default LogOut;

接下來我要寫個登錄控制器來渲染上面的組件：

import React from 'react';
import LogOut from "./LogOut";
import LogIn from "./LogIn";
class HomePage1 extends React.Component {
    constructor(props){
        //數據初始化
        super(props);
        this.logIn = this.logIn.bind(this);
        this.logOut = this.logOut.bind(this);
        this.state = {
            a:1,
            b:2,
            c:3,
            isLogin:false,
            user:null
        }
    }
    componentWillMount(){
        //數據已經初始化，但是還沒有渲染dom,一般很少用
    }

    componentDidMount(){
        //第一次渲染dom,在這裏可以請求ajax,並setDate重新渲染數據


    }
    componentWillReceiveProps(){
        //在接受父組件改變後的props需要重新渲染組件時用的比較多

    }
    componentWillUnmount(){
        //卸載和數據銷燬
    }

    //寫任何想寫的方法******************

    logIn(e){
        alert("登錄了")
        this.setState({
            isLogin:true,
            user:e
        })
    }
    
    logOut(){
        alert("退出登錄了")
        this.setState({
            isLogin:false,
            user:null
        })
    }

    render() {

        let button;
        if(this.state.isLogin){
            button = <LogOut onClick={this.logOut}/>
        }else{
            button = <LogIn onClick={(e)=>this.logIn('admin',e)}/>
        }



        return (
            <div>
                <h1>Hello，{this.state.a+this.state.b}</h1>
                {button}
                <p>{this.state.user}</p>
            </div>
        )
    }
}

export default HomePage1;

其中，我對我學習中碰到的問題簡略的說一下：

1.剛開始學習react,竟然不知道在哪裏寫個自己的方法，經過翻查文檔以及度娘，才知道，直接在class組件中寫就行了，當然方法寫完了，要去觸發他，接下來怎麼觸發呢，又是個問題，react給提供了兩種：

1.1 在constructor構建中寫入this.LogIn=this.LogIn.bind(this); 具體爲什麼這樣寫，文檔給的已經很清楚了，然後在return的元素中開始觸發onClick="{this.Login}"就可以了，，，

1.2在寫方法的時候，使用箭頭函數，Login = () =>{},然後在return的元素中開始觸發onClick="{this.Login}"就可以了，，，

等，，，，，我如果想穿參數怎麼辦呢？？官網也給了兩種方法：

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

在這兩種情況下，React 的事件對象 e 會被作爲第二個參數傳遞。如果通過箭頭函數的方式，事件對象必須顯式的進行傳遞，而通過 bind 的方式，事件對象以及更多的參數將會被隱式的進行傳遞。 （我習慣性的用第一種方法了）

2.對於props這個屬性，官網也給提出了，非常重要的屬性，寫這個小案例的時候我就採坑了。。。。props主要用於組件之間的參數傳遞。

2.1父子傳值。

.向下傳值--父組件向子組件傳值
父組件通過props傳遞一個不是方法的數據，給子組件；

//父組件中
<Child data={[1,2,3]} />
//子組件中
console.log(this.props.data);

2.向上傳值--子組件向父組件傳值
父組件通過props向子組件傳入一個方法，子組件在通過調用該方法，並將數據以參數的形式傳給父組件，父組件可以在該方法中對傳入的數據進行處理；

//父組件
import Child from './Child.js'；
export default class Parent extend compenent{
  getData=(data)=>{
    console.log(data);
  }
  render(){
    return (
      <div>
        父組件
        <Child getData={this.getData}/>
      </div>
    )
  }
}

//子組件
export default class Child extend compenent{
  state={
    data:[1,2,3]
  }
  render(){
    const {data}=this.state;
    return (
      <div>
        子組件
        <button onClick={()=>{this.props.getData(data)}}><button>
      </div>
    )
  }
}