react 入門

react三大屬性

一.狀態

類組件
1. state 是組件的屬性，值是對象。state中的數據是可讀可寫的,通過更新state來更新對應的頁面顯示(重新渲染組件)，通過setState來更新state數據且更新是一種合併 ，在類組件中使用.
組件自定義的方法中this為undefined
(1)強制綁定this: 通過函數對象的bind()
(2)箭頭函數

class Demo extends Component {
  //定義
  state = {date: new Date(),count:0};
  //為addClick強制綁定this
  addClick=this.addClick.bind(this);

  //addClick在未強制綁定this的時候無法在addClick內訪問this.state
  //this指向是undefined
  addClick(){
　　 const {count} =this.state
    //修改state中count的值，當點擊的時候加1
    this.setState({count:count+1})
  }
//箭頭函數
  minusClick=()=>{
　　 const {count} =this.state
    this.setState({count:count-1})
  }
  
    render() {
      const {date,count}=this.state
      return (
        <div>
          <h1>計數{count}</h1>
          <h2>時間 {date.getDate()}.</h2>
          <button onClick={this.addClick}>加</button>
          <button onClick={this.minusClick}>減</button>
        </div>
      );
    }
  }

函數組件

1. useState 在函數組件里用 返回一個數組：狀態和一個修改狀態的方法， 狀態需要通過這個方法來進行修改並觸發視圖更新'渲染頁面'

   const [count,setCount]=useState(0)

    const addClick=(()=>{
        setCount(count+1)
    })
    const minusClick=(()=>{
        setCount(count-1)
    })
        
    return (
        <div>
            <header>
            <h3>計數:{count}</h3>
            <button onClick={addClick}>加</button>
            <button onClick={minusClick}>減</button>
            </header>
        </div>
    );