React之學習記錄

1、項目搭建

注意事項：node>=6 and npm>=5.2

一、npx create-react-app hello-world
二、cd hello-world
三、npm start

2、components與props：

注意事項：一、props屬性爲只讀屬性。二、修改雙向綁定值，需引入state

import React,{Component} from 'react';
import ReactDOM from 'react-dom';

一、方式一：

注意事項：修改Welcome實例內容，須要重複建立Welcome實例，如setInterval(function(){React.Component(<Welcome name={new Date()} />,RootDOM)},1000)

function Welcome(props){
    return (<div>展現數據：{props.name}</div>)
}

二、方式二：

class Welcome extends Component{
    constructor(props){
        super(props)
    }
    render(){
        return (
            <div>
                <span>展現數據{this.props.name}</span>
                <span>展現數據2</span>
            </div>
        )
    }
}

ReactDOM.render(<Welcome name="wqqq" />, document.getElementById('root'));

3、state與lifecycle：

解析：一、state在constructor中注入對象。二、state中的值經過this.setState()進行修改。方式一【object】：this.setState({propertyName:propertyValue})；方式二【function(上次修改的state對象，props){}】。三、此處用React的lifecycle中有：componentDidMount、componentWillUnmount。

class Clock extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            date: new Date(),
            secondForm: 0
        }
    }

    tick() {
        this.firstFormSetState();
        this.secondFormSetState();
    }
    
    *新值不依賴舊值或props，計算出新值*
    firstFormSetState() {
        this.setState({
            date: new Date()
        })
    }

    *new value reply on old value or props*
    secondFormSetState() {
        this.setState((lastState, props) => {
            return ({secondForm: lastState.secondForm + 1})
        })
    }

    componentDidMount() {
        this.timerID = setInterval(() => this.tick(), 1000);
    }

    componentWillUnmount() {
        clearInterval(this.timerID)
    }

    render() {
        return (
            <div>
                <div>this is {this.state.date.toLocaleTimeString()}.</div>
                <div>second form of setState{this.state.secondForm}</div>
            </div>
        )
    }
}

ReactDOM.render(<Clock/>, document.getElementById('root'));

4、事件綁定

總結：一、改變this指向方法：bind()方法【this.handleClick=this.handleClick.bind(this);，或者<button onClick={this.handleClick.bind(this,'21')}>測試</button>}】、或者定義函數時使用arrow function【handleClick=()=>{}】。二、阻止默認行爲，必須使用event.preventDefault()

class EventConstants1 extends React.Component{
    constructor(props){
        super(props);
        this.state={
            isToggleOn:true
        };
        // This binding is necessary to make `this` work in the callback
        // this.handleClick=this.handleClick.bind(this);
    }
    actionClick(e){
        e.preventDefault();
    }
    handleClick(...params){
        console.log(params);
        this.setState(()=>({
            isToggleOn:!this.state.isToggleOn
        }))
    }
    render(){
        return (
            <div>
                <a href="http://192.168.0.242:80" onClick={this.actionClick}>Click me to explain event.preventDefault()</a>
                <button onClick={this.handleClick.bind(this,'21')}>{this.state.isToggleOn?'YES':'NO'}</button>
            </div>
        )
    }
}