react基础必会语法

编程语言 2023-04-10 09:20:45 阅读次数: 0

第一部分：类组件和函数组件

类组件

// 第一步：导入react
import React from "react";
// 第二步：创建构造函数ChildTest继承 React.Component
class ChildTest extends React.Component {
    render(){
        return <div>
            <h2>我是class类组件</h2>
        </div>
    }
}

export default ChildTest

函数组件

/*
函数式组件：16.8之前-无状态组件
            16.8之后-react hooks
*/
function App(){
    return (
    <div>
        <h2>App</h2>
    </div>
    )
}
export default App

第二部分：组件的嵌套

import { Component } from "react";
// import React from "react";
class Child extends Component{
    render(){
        return <div>Child</div>
    }
}
class Navbar extends Component {
    render(){
        return (
            <div>Navbar<Child></Child></div>
        )
    }
}
function Swiper(){
    return <div>Swiper</div>
}
// 箭头函数this指向外部：提倡
const Tabbar=()=>{
    return <div>Swiper</div>
}
class App extends Component {
    render(){
        return (
            <div>
                <Navbar></Navbar>
                <Swiper></Swiper>
                <Tabbar></Tabbar>
            </div>
        )
    }
}
export default App

第三部分：组件的样式

第一步：新建/css/01-index.css

.active{
    background-color: blue;
}
#myapp{
    background-color: pink;
}

 第二步：导入类组件

// import { Component } from "react";
import React from "react";
import './css/01-index.css' //导入css模块 webpack的支持
// 推荐行内样式：因为react觉得每一个组件都是一个独立的整体
export default class App extends React.Component {
    render(){
        let obj = {
            backgroundColor:"yellow",
            fontSize:"30px"
        }
        return (
            <div>
              app组件
              <h3 style={obj}>111111111</h3>
              <h3 style={
   
   {backgroundColor:"red"}}>2222222222222</h3>
              {/* 以前的class现在的className*/}
              <h3 className="active">css样式测试class类名</h3>
              <h3 id="myapp">id选择器</h3>
              {/* 以前的for现在的htmlFor */}
              <label htmlFor="username">用户名：</label>
              <input type="text" id="username"/>
            </div>
        )
    }
}

第四部分：事件绑定和this指向

// import { Component } from "react";
import React from "react";
// 推荐行内样式
export default class App extends React.Component {
   state={
       a:100
   }
   render(){
       return (
           <div>
            <input/>
            <button onClick={()=>{
               console.log(this,this.state.a)//100__有this
            }}>点我1</button>
            <button onClick={this.handleClick2}>点我2</button>
            <button onClick={this.handleClick3}>点我3</button>
            <button onClick={()=>{this.handleClick4()}}>点我4</button>
           </div>
       )
   }
   handleClick2=()=>{
       console.log(this,this.state.a,2)//100__有this
   }
   handleClick3(){
       console.log(this,3) //没有this //this.handleClick3.bind(this)可改变this指向
   }
   handleClick4=()=>{
       console.log(this,this.state.a,4)//100__有this
   }
}

第五部分：ref和非受控表单组件（获取dom）

  1. 在state中添加一个状态，作为表单元素的value值（控制表单元素的值）

  2. 给表单元素添加change事件，设置state的值为表单元素的值（控制值的变化）

import React from "react";
export default  class Ref extends React.Component {
  myref =React.createRef()
  render(){
      return (
          <div>
              <h2>ref</h2>
              {/* <input ref="mytext"/> */}
              <input ref={this.myref}/>
              <button onClick={()=>{this.handle()}}>点我</button>
          </div>
      )
  }
  handle=()=>{
      // console.log(this.refs.mytext)//以前的写法
      console.log(this.myref.current) //现在获取dom(input)
  }
}

第六部分：受控表单组件

非受控组件借助于ref，使用原生DOM的方式来获取表单元素的值

import React from "react";
export default  class App extends React.Component {
  state={
      mgs:10
  }
  render(){
     return (
        <div>
          <h2>Controlled</h2>
          <input onChange={this.handle} type="text" value={this.state.mgs}/>
        </div>
     )
  }
  handle=(e)=>{
     this.setState({
        mgs:e.target.value
     })
     console.log(this.state.mgs) //此时获取到mgs中数据为表单数据不过打印延迟一位数
  }
}

第七部分：setState

setState更新数据讲解

  • setState() 是异步更新数据的

  • 注意：使用该语法时，后面的 setState() 不要依赖于前面的 setState()

1. 当你调用 setState 的时候，React.js 并不会马上修改 state （为什么）
2. 而是把这个对象放到一个更新队列里面
3. 稍后才会从队列当中把新的状态提取出来合并到 state 当中，然后再触发组件更新。

可以多次调用 setState() ，只会触发一次重新渲染
this.state = { count: 1 }
this.setState({
	count: this.state.count + 1
})
console.log(this.state.count) // 1

 在使用 React.js 的时候，并不需要担心多次进行 setState 会带来性能问题。

推荐语法

  • 推荐：使用 setState((preState) => {}) 语法

  • 参数preState: React.js 会把上一个 setState 的结果传入这个函数

this.setState((preState) => {
    return {
    	count: preState.count + 1
    }
}) 
console.log(this.state.count) // 1

 这种语法依旧是异步的，但是state可以获取到最新的状态，适用于需要调用多次setState

第二个参数

  • 场景：在状态更新（页面完成重新渲染）后立即执行某个操作

  • 语法：setState(updater[, callback])

this.setState(
	(state) => ({}),
	() => {console.log('这个回调函数会在状态更新后立即执行')}
)

例如
this.setState(
   (state, props) => {},
   () => {
	   document.title = '更新state后的标题：' + this.state.count
   }
)

第一种语法：this.setState({要修改的数据})

注意：不要直接修改state中的值，必须通过this.setState()方法进行修改

class App extends React.Component {
   state = {
     count: 1
   }
  handleClick() {
    this.setState({
      count: this.state.count + 1
    })
    console.log(this.state.count)//在此处打印只能获取到数据更改前的值
  }
  render() {
    return (
      <div>
        <p>次数: {this.state.count}</p>
        <button onClick={this.handleClick.bind(this)}>点我+1</button>
      </div>
    )
  }
}
<!-- setState是一个异步还是一个同步 -->
+ 18以前
 - 使用react事件触发就是一个异步
 - 不使用react的事件(原生)触发就是一个同步
+ 18及以后+++++都是一个异步

第二种语法：

class App extends React.Component {
   state = {
     count: 1
   }
  handle=()=>{
    this.setState(
        (preState)=>{
            // console.log(preState) //获取更新之前的值
            return {
                count:this.state.count+1
          }
     },
     ()=>{
       console.log(this.state.count)//在此箭头函数中能获取到state中数据更新的最新值
      }
    )
 }
 render() {
    return (
      <div>
        <p>次数: {this.state.count}</p>
        <button onClick={this.handleClick.bind(this)}>点我+1</button>
      </div>
    )
  }
}

第八部分：组件通讯

父传子

第一种：函数组件通讯

在父组件中

<Hello name="jack" age={19} />

在子组件中

function Hello(props) {
   console.log(props)
   return (
       <div>接收到数据：{props.name}</div>
   )
}

第二种：类组件通讯

在父组件中

<Hello name="jack" age={19} />

在子组件中

class Hello extends React.Component {
   render() {
       return (
           <div>接收到的数据：{this.props.age}</div>
       )
   }
}

子传父

思路：利用回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数。

  1. 父组件提供一个回调函数（用于接收数据）

  2. 将该函数作为属性的值，传递给子组件

  3. 子组件通过 props 调用回调函数

  4. 将子组件的数据作为参数传递给回调函数

父组件提供函数并且传递给字符串

//msg为接收到子组件传过来的数据
class Parent extends React.Component {
   getChildMsg = (msg) => {
       console.log('接收到子组件数据', msg)
   }
   render() {
       return (
           <div>
              子组件：<Child getMsg={this.getChildMsg} />
           </div>
       )
   }
}

子组件接收函数并且调用

class Child extends React.Component {
    state = { childMsg: 'React' }
    handleClick = () => {
    	this.props.getMsg(this.state.childMsg)
    }
    return (
    	<button onClick={this.handleClick}>点我，给父组件传递数据</button>
    )
}

**注意：回调函数中 this 指向问题！**

第九部分：兄弟组件

第一步：创建公共js文件

import React from "react";
export const {Provider,Consumer} = React.createContext()

第二步：使用 Provider 组件作为父节点。

import React from "react";
import {Provider} from "./index.js";

class App extends React.Component {

  render(){
     //设置 value 属性，表示要传递的数据。
      return <Provider value="pink">
      <child1></child1>
      <child2></child2>
    </Provider>
  }
}

export default App;

第三步：调用 Consumer 组件接收数据。

import { Consumer } from "./index.js";
const Child1= (props)=>{
   return (
      <div>
        <h2>props{props.children}</h2>//类似插槽
        <Consumer>
         {(data)=>{
              return <span>data接收到的参数==={data}===</span>
         }}
         </Consumer>
      </div>
    )
}
export default Child1

第十部分：props校验

目的：校验接收的props的数据类型，增加组件的健壮性

使用步骤

  1. 导入 prop-types 包

  2. 使用组件名.propTypes = {} 来给组件的props添加校验规则

  3. 校验规则通过 PropTypes 对象来指定

import PropTypes from 'prop-types'
function App(props) {
    return (
    	<h1>Hi, {props.colors}</h1>
    )
}
App.propTypes = {
    // 约定colors属性为array类型
    // 如果类型不对，则报出明确错误，便于分析错误原因
    colors: PropTypes.array
}

约束规则

  1. 常见类型：array、bool、func、number、object、string

  2. React元素类型：element

  3. 必填项：isRequired

  4. 特定结构的对象：shape({})

// 常见类型
optionalFunc: PropTypes.func,
// 必选
requiredFunc: PropTypes.func.isRequired,
// 特定结构的对象
optionalObjectWithShape: PropTypes.shape({
	color: PropTypes.string,
	fontSize: PropTypes.number
})

props默认值

场景：分页组件 每页显示条数

作用：给 props 设置默认值，在未传入 props 时生效

function App(props) {
    return (
        <div>
            此处展示props的默认值：{props.pageSize}
        </div>
    )
}
// 设置默认值
App.defaultProps = {
	pageSize: 10
}
// 不传入pageSize属性
<App />

猜你喜欢

转载自blog.csdn.net/m0_62823653/article/details/125648269
今日推荐
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
周排行
阿里云短信服务平台注册
Windows下的字符串处理(1)
sqoop: mysql导入数据到hdfs, hive, hbase
commons.lang中常用的工具类
离线安装PostgreSQL11.6
使用PyTorch简单实现卷积神经网络模型
一文彻底搞定谱聚类
一道面试题引发的血案
One Chat for Mac(聊天工具)
TCP/IP的底层队列是如何实现的？
每日归档
更多
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022