这篇文章主要介绍“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 App组件的嵌套
import 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文件中
class样式
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 = 100render(){ return( <button onClick={ ()=>{ console.log("click1","如果处理逻辑过多不推荐",this.a);} }>add1</button> )}箭头函数作用域为App，所以this直接为App
????render内调用函数，函数普通函数 – 使用bind改变this指向
a = 100render(){ return( {} <button onClick={ this.handleClick2.bind(this)}>add2-不推荐</button> )}handleClick2(){ console.log("click2",this.a)}render内刚开始 this 为 undefined，通过使用 bind 将this指向改为App
????render内调用函数，函数箭头函数 – 直接使用this
a = 100render(){ return( <button onClick={ this.handleClick3 }>add3-比较推荐</button> )}handleClick3 = ()=>{ console.log("click3",this.a)}????render内使用箭头函数调用函数 – 直接使用this
a = 100render(){ return( {} <button onClick={ ()=>{ this.handleClick4() } }>add4</button> {} )}handleClick4 = ()=>{ console.log("click4",this.a)}onClick里面的this为App，所以当handleClick被调用时不论是箭头函数还是普通函数this均和调用者相同都为App
事件的参数传递
????1. 在render里调用方法的地方外面包一层箭头函数
????2. 在render里通过this.handleClick.bind(this,参数)来传递
????3. 通过event传递
ref的应用
????给标签设置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)
状态就是组件描述某种显示情况的数据，由组件自己设置和更改，也就是说组件自己维护，使用状态的目的就是为了在不同的状态下是组建的显示不同（自己管理）
定义state
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间接修改
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同步异步
setState处在同步的逻辑中，异步更新状态，更新真实dom
setState处在异步的逻辑中，同步更新状态，同步更新真实dom
setState接受第二个参数，第二个参数回调函数，状态和dom更新后就会被触发
补充-React面试题
react事件绑定和普通事件绑定的区别
React并不会真正的绑定事件到每一个具体的《》元素上，而是采用事件代理的模式，绑定在根节点身上
Event对象
和普通浏览器一样，事件handler会被自动传入一个event对象，这个对象和普通的浏览器event对象所包含的方法和属性基本一致。不同的是React中的event对象并不是浏览器提供的，而是自己内部构建的。他同样具有event.stopPropagation、event.preventDefalut这种常用方法
到此，关于“React组件的创建与state同步异步方法是什么”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
