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> );
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/548853.html
標籤：其他
上一篇：vue3創建工程