(創(chuàng)作不易，感謝有你，你的支持，就是我前行的最大動力，如果看完對你有幫助，請留下您的足跡）
目錄
React中的事件綁定
React 基礎(chǔ)事件綁定
使用事件對象參數(shù)?
傳遞自定義參數(shù)?
同時傳遞事件對象和自定義參數(shù)?
React中的組件?
組件是什么
React組件
useState?
修改狀態(tài)的規(guī)則
狀態(tài)不可變
修改對象狀態(tài)
組件的樣式處理
classnames優(yōu)化類名控制?
React中的事件綁定
React 基礎(chǔ)事件綁定
語法： on + 事件名稱 = { 事件處理程序 } ，整體上遵循駝峰命名法
使用事件對象參數(shù)?
語法：在事件回調(diào)函數(shù)中設(shè)置形參e
傳遞自定義參數(shù)?
語法：事件綁定的位置改造 成箭頭函數(shù)的寫法 ，在執(zhí)行clickHandler實際處理業(yè)務函數(shù)的時候傳遞實參
注意：不能直接寫函數(shù)調(diào)用，這里事件綁定需要一個 函數(shù)引用
同時傳遞事件對象和自定義參數(shù)?
語法：在事件綁定的位置傳遞事件實參e和自定義參數(shù)，clickHandler中聲明形參，注意順序?qū)?/span>
React中的組件?
組件是什么
概念：一個組件就是用戶界面的一部分，它可以有自己的邏輯和外觀，組件之間可以互相嵌套，也可以復用多次
組件化開發(fā)可以讓開發(fā)者像搭積木一樣構(gòu)建一個完整的龐大的應用
React組件
在React中，一個組件就是 首字母大寫的函數(shù) ，內(nèi)部存放了組件的邏輯和視圖UI, 渲染組件只需要把組件 當成標簽書寫 即可
useState?
useState 是一個 React Hook（函數(shù)），它允許我們向組件添加一個 狀態(tài)變量 , 從而控制影響組件的渲染結(jié)果
本質(zhì)：和普通JS變量不同的是，狀態(tài)變量一旦發(fā)生變化組件的視圖UI 也會跟著變化 （數(shù)據(jù)驅(qū)動視圖）
// useState實現(xiàn)一個計數(shù)器按鈕
import { useState } from 'react'
function App () {
// 1. 調(diào)用useState添加一個狀態(tài)變量
// count 狀態(tài)變量
// setCount 修改狀態(tài)變量的方法
const [count, setCount] = useState(0)
// 2. 點擊事件回調(diào)
const handleClick = () => {
// 作用:
// 1. 用傳入的新值修改count
// 2. 重新使用新的count渲染UI
setCount(count + 1)
}
return (
<div>
<button onClick={handleClick}>{count}</button>
</div>
)
}
export default App修改狀態(tài)的規(guī)則
狀態(tài)不可變
在React中，狀態(tài)被認為是只讀的，我們應該始終 替換它而不是修改它， 直接修改狀態(tài)不能引發(fā)視圖更新? ? ? ?
修改對象狀態(tài)
?規(guī)則：對于對象類型的狀態(tài)變量，應該始終傳給set方法一個全新的對象來進行修改
??
文章來源：http://www.zghlxwxcb.cn/news/detail-738444.html
? ? ? 直接修改原對象，不引發(fā)視圖變化? ? ? ? ? ? ? ? ? ? ? ? 調(diào)用set傳入新對象用于修改
組件的樣式處理
React組件基礎(chǔ)的樣式控制有倆種方式文章來源地址http://www.zghlxwxcb.cn/news/detail-738444.html
1. 行內(nèi)樣式（不推薦）
2. class類名控制? ? ? ? ?
? ? ? ? ? ? ? index.css? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? App.js
classnames優(yōu)化類名控制?
classnames是一個簡單的JS庫，可以非常方便的 通過條件動態(tài)控制class類名的顯示
現(xiàn)在的問題：字符串的拼接方式不夠直觀，也容易出錯
到了這里，關(guān)于前端react入門day02-React中的事件綁定與組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
