溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“React組件的創建與state同步異步方法是什么”，在日常操作中，相信很多人在React組件的創建與state同步異步方法是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”React組件的創建與state同步異步方法是什么”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
類組件是指使用ES6中class定義的組件稱為類組件
導入類組件時 組件名首字母必須大寫
類組件必須要繼承React.Component父類（相關方法和屬性均會被繼承）
render為固定函數（必須有），有返回值，返回類組件的結構(jsx)
????定義類組件并暴露
import React from 'react'
//App為類名 可隨意起 繼承 React.Component(固定，不可丟掉)
class App extends React.Component{
render(){
render(){
//1.return若要回車必須加上（）
//2.最外層只能有一個標簽，不能有兄弟并列
return (
<section>
hello react
<ul>
<li>1111</li>
<li>222</li>
</ul>
<div>新的內容111</div>
<div>新的內容2222</div>
</section>
)
}
}
}
export default App //導出：方便被其他組件引用????在src下的 index.js入口文件中導入 需要的App類組件
React 17之前版本
import React from 'react'
import ReactDOM from 'react-dom'
import App from "./01-base/01-class組件" //引入時必須大寫
ReactDOM.render(<App></App>,document.getElementById("root"))
......................................
React 18版本
import {createRoot} from 'react-dom/client'
import App from "./01-base/01-class組件" //導入App組件
const container = document.getElementById('root')
const root = createRoot(container); //App放入的位置
root.render(<App/>) //單雙標簽均可以function App(){
return (
<div>
hello functional component
<div>111</div>
<div>2222</div>
</div>
)
}
export default Appimport React, { Component } from 'react'
class Child extends Component{
render(){
return <div>child</div>
}
}
class Navbar extends Component{
render(){
return (
<div>
navbr
<Child></Child>
</div>
)
}
}
function Swiper(){
return <div>swiper</div>
}
const Tabbar = ()=> <div>tabbar</div>
//以上3種子組件的形式 均可進行嵌套
export default class App extends Component {
render() {
return (
<div>
<Navbar></Navbar>
<Swiper></Swiper>
<Tabbar></Tabbar>
</div>
)
}
}
........................................
import App from "./01-base/03-組件的嵌套"
import {createRoot} from 'react-dom/client'
const container = document.getElementById('root')
const root = createRoot(container);
root.render(<App/>)推薦使用行內樣式，因為React覺得每個組件都是一個獨立的整體
想給虛擬dom添加行內樣式，需要使用表達式傳入樣式對象的方式來實現
render() {
var myname = 'xiaoming'
var isChecked = false
var obj = {
backgroundColor:"yellow"，
fontSize:""//駝峰命名法
}
return (
<div>
{myname}-{10+20}-歲
{10>20?"a":"b"}
<div style={obj}>111</div>
<div style={style={{textDecoration:isChecked?"line-through":''}}>
//這里有兩個括號，第一個表示我們再要JSX里插入了JS了，第二個是對象的括號
<div style={{background:"red"}}>222</div>
</div>
)
}????1. {}里面為js表達式，不支持語句
????2. 行內樣式需要寫入一個樣式對象如上面的obj，這個樣式對象的位置可以放在很多地方，例如render函數里、組件原型上、外鏈js文件中
css文件中寫入樣式
導入css文件
為元素添加class類名（class需要寫成className,在寫類js代碼，會受到js規則的存在，而class為關鍵字）
<div className="active">333</div> <div id="myapp">444</div>
???? ?? class ==> className，for ===> htmlFor(label) ???? ??
<label htmlFor='username'>用戶名：</label> <input type="text" id="username"></input>
????render內使用箭頭函數— 直接使用this
a = 100
render(){
return(
<button onClick={ ()=>{
console.log("click1","如果處理邏輯過多不推薦",this.a);
} }>add1</button>
)
}箭頭函數作用域為App，所以this直接為App
????render內調用函數，函數普通函數 – 使用bind改變this指向
a = 100
render(){
return(
{/* call,apply改變this指向并自動執行函數；bind改變this指向不自動執行 */}
<button onClick={ this.handleClick2.bind(this)}>add2-不推薦</button>
)
}
handleClick2(){
console.log("click2",this.a)
}render內剛開始 this 為 undefined，通過使用 bind 將this指向改為App
????render內調用函數，函數箭頭函數 – 直接使用this
a = 100
render(){
return(
<button onClick={ this.handleClick3 }>add3-比較推薦</button>
)
}
handleClick3 = ()=>{
console.log("click3",this.a)
}????render內使用箭頭函數調用函數 – 直接使用this
a = 100
render(){
return(
{/* 非常推薦 */}
<button onClick={ ()=>{
this.handleClick4()
} }>add4</button>
{/* 執行匿名函數后調用handleClick4 */}
)
}
handleClick4 = ()=>{
console.log("click4",this.a)
}onClick里面的this為App，所以當handleClick被調用時不論是箭頭函數還是普通函數this均和調用者相同都為App
????1. 在render里調用方法的地方外面包一層箭頭函數
????2. 在render里通過this.handleClick.bind(this,參數)來傳遞
????3. 通過event傳遞
????給標簽設置ref=“mytext”
<input ref="mytext"></input>
<button onClick={ ()=>{
console.log("click1",this.refs.mytext.value);
} }>add1</button>通過 this.refs.mytext，ref可以獲取到應用的真實dom
???? 給組件設置ref="username
通過這個獲取 this.refs.username ，ref可以獲取到組件對象
????新的寫法（嚴格模式下）
myref = React.createRef()
<input ref={this.myref}></input>
<button onClick={ ()=>{
console.log("click",this.myref.current.value);
} }>add1</button>訪問 this.myref.current
狀態就是組件描述某種顯示情況的數據，由組件自己設置和更改，也就是說組件自己維護，使用狀態的目的就是為了在不同的狀態下是組建的顯示不同（自己管理）
state={
mytext:"收藏",
myShow:true
}
render(){
return(
<div>
<h2>welcome</h2>
<button onClick={()=>{
//this.state.mytext = "取消收藏" 不用直接修改state
}}>{this.state.mytext}</button>
</div>
)
}this.state是純js對象，在vue中，data屬性利用Object.defineProperty處理過的，更改data的數據的時候回出發數據的getter和setter,但是React中沒有這樣的處理，如果直接更改，react無法得知，所以需要使用setState間接修改
myShow存放在實例的state對象當中，組件的render函數內，會根據組件的state的中的myShow不同 顯示“取消”或“收藏”
可以一次更新多個狀態
import React, { Component } from 'react'
export default class App extends Component {
// state={
// mytext:"收藏",
// myShow:true
// }
constructor(){
super()//必須寫
this.state={
mytext:"收藏",
myShow:true,
myName:"xiaoming"
}
}
// ！！！！以上兩種state寫法均可以!!!
render() {
return (
<div>
<h2>welcome--我的名字是{this.state.myName}</h2>
<button onClick={()=>{
//this.state.mytext = "取消收藏" 不用直接修改state
this.setState({
//mytext:"取消收藏"
myName:'zhangsan',
myShow:!this.state.myShow
})//間接修改state
if(this.state.myShow){
console.log("收藏邏輯");
}else{
console.log("取消邏輯");
}
}}>{this.state.myShow?'收藏':'取消收藏'}</button>
</div>
)
}
}setState處在同步的邏輯中，異步更新狀態，更新真實dom
setState處在異步的邏輯中，同步更新狀態，同步更新真實dom
setState接受第二個參數，第二個參數回調函數，狀態和dom更新后就會被觸發
React并不會真正的綁定事件到每一個具體的《》元素上，而是采用事件代理的模式，綁定在根節點身上
和普通瀏覽器一樣，事件handler會被自動傳入一個event對象，這個對象和普通的瀏覽器event對象所包含的方法和屬性基本一致。不同的是React中的event對象并不是瀏覽器提供的，而是自己內部構建的。他同樣具有event.stopPropagation、event.preventDefalut這種常用方法
到此，關于“React組件的創建與state同步異步方法是什么”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
