React（一) —— 组件的创建与state

🧁个人主页：个人主页

✌支持我 ：点赞👍收藏🌼关注🧡

文章目录

⛳React入门到精通

🎀组件的创建

类组件

类组件是指使用ES6中class定义的组件称为类组件

导入类组件时 组件名首字母必须大写

类组件必须要继承React.Component父类（相关方法和属性均会被继承）

render为固定函数（必须有），有返回值，返回类组件的结构(jsx)

🏸定义类组件并暴露

import React from'react'//App为类名 可随意起 继承 React.Component(固定，不可丢掉)classAppextendsReact.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>)}}}exportdefault 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/>)//单双标签均可以

函数式组件

functionApp(){return(<div>
            hello functional component
            <div>111</div><div>2222</div></div>)}exportdefault App

组件的嵌套

import React,{ Component }from'react'classChildextendsComponent{render(){return<div>child</div>}}classNavbarextendsComponent{render(){return(<div>
                navbr
                <Child></Child></div>)}}functionSwiper(){return<div>swiper</div>}constTabbar=()=><div>tabbar</div>//以上3种子组件的形式 均可进行嵌套exportdefaultclassAppextendsComponent{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 =falsevar 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({/* 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 =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 */})}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><h1>welcome</h1><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'exportdefaultclassAppextendsComponent{// state={//   mytext:"收藏",//   myShow:true// }constructor(){super()//必须写this.state={mytext:"收藏",myShow:true,myName:"xiaoming"}}//  ！！！！以上两种state写法均可以!!!render(){return(<div><h1>welcome--我的名字是{this.state.myName}</h1><button onClick={()=>{//this.state.mytext = "取消收藏" 不用直接修改statethis.setState({//mytext:"取消收藏"myName:'zhangsan',myShow:!this.state.myShow
            })//间接修改stateif(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这种常用方法

🎉🎉🎉如有错误，请评论指出，thankyou~🎀🎀🎀
✨✨✨创作不易，如对您有帮助，欢迎给博主点赞收藏，给予鼓励哟💛