練習REACT （２）

JSX只能有一個root tag

App.js

import React, { useState } from 'react'
function App() {
  const [total, setTotal] = useState(0)
  const [total2, setTotal2] = useState(0)
  const [total3, setTotal3] = useState(0)
  return (
    <>
      <h1
        onClick={() => {
          setTotal(total + 1)
          setTotal2(total2 + 2)
          setTotal3(total3 + 5)
        }}
      >
        {total}
      </h1>
      <h1>{total2}</h1>
      <h1>{total3}</h1>
    </>
  )
}
export default App

在App元件中使用不同的元件類型

建立components資料夾，新增AppClass.js和AppFunction.js

AppClass.js

import React from 'react'
class AppClass extends React.Component {
  constructor() {
    super()
    this.state = {
      total: 0, //init value
    }
  }
  render() {
    return (
      <>
        <h1
          onClick={() => {
            this.setState({
              total: this.state.total + 1,
            })
          }}
        >
          {this.state.total}
        </h1>
      </>
    )
  }
}
export default AppClass

AppFunction.js

import React, { useState } from 'react'
function AppFunction() {
  const [total, setTotal] = useState(0)
  return (
    <>
      <h1
        onClick={() => {
          setTotal(total + 1)
        }}
      >
        {total}
      </h1>
    </>
  )
}
export default AppFunction

App.js

import React from 'react'
import AppFunction from './components/AppFunction'
import AppClass from './components/AppClass'
function App() {
  return (
    <>
      <AppFunction />
      <AppClass />
    </>
  )
}
export default App

利用props把資料傳遞給子女元件

App.js

import React from 'react'
import AppFunction from './components/AppFunction'
import AppClass from './components/AppClass'
function App() {
  return (
    <>
      <AppFunction initValue={99} />
      <AppClass initValue={88} />
    </>
  )
}
export default App

AppClass.js

import React from 'react'
class AppClass extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      total: props.initValue, //init value
    }
    console.log(props)
  }
  render() {
    console.log(this.props)
    return (
      <>
        <h1
          onClick={() => {
            this.setState({
              total: this.state.total + 1,
            })
          }}
        >
          {this.state.total}
        </h1>
      </>
    )
  }
}
export default AppClass

AppFunction.js

import React, { useState } from 'react'
function AppFunction(props) {
  //console.log(props)
  const [total, setTotal] = useState(props.initValue)
  return (
    <>
      <h1
        onClick={() => {
          setTotal(total + 1)
        }}
      >
        {total}
      </h1>
    </>
  )
}
export default AppFunction

元件的狀態利用props初始化 正確用法

App.js

import React, { useState } from 'react'
import AppFunction from './components/AppFunction'
import AppClass from './components/AppClass'
function App() {
  const [baseValue, setBaseValue] = useState(0)
  return (
    <>
      <AppFunction initValue={baseValue + 99} />
      <AppClass initValue={baseValue + 88} />
      <button onClick={() => setBaseValue(100)}>重設基準值        +100</button>
    </>
  )
}
export default App

AppClass.js

import React from 'react'
class AppClass extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      total: 0, //init value
    }
    console.log(props)
  }
  // 初始化用
  componentDidMount() {
    this.setState({
      total: this.props.initValue,
    })
  }
  // 更動時用
  componentDidUpdate(prevProps) {
    if (this.props.initValue !== prevProps.initValue) {
      this.setState({
        total: this.props.initValue,
      })
    }
  }
  render() {
    //console.log(this.props)
    return (
      <>
        <h1
          onClick={() => {
            this.setState({
              total: this.state.total + 1,
            })
          }}
        >
          {this.state.total}
        </h1>
      </>
    )
  }
}
export default AppClass

AppFunction.js

import React, { useState, useEffect } from 'react'
function AppFunction(props) {
  console.log(props)
  const [total, setTotal] = useState(0)
  // initValue有變動時與初始化時設定一次
  useEffect(() => {
    setTotal(props.initValue)
  }, [props.initValue])
  return (
    <>
      <h1
        onClick={() => {
          setTotal(total + 1)
        }}
      >
        {total}
      </h1>
    </>
  )
}
export default AppFunction

元件內部的私有資料

state（狀態）－每個元件中自行控管的內部資料

state與使⽤者互動有關，它會是那個因為使⽤者的操作，⽽不斷改變的資料值

state是個物件，⼀開始會先在constructor(建構式)中進⾏定義，在這裡設定它的初始值 state只能在元件內部存取與更動，無法在不同元件間直接存取使⽤

setState－唯⼀可以改變state的⽅法

props（屬性）