react 基础知识(一)

这篇具有很好参考价值的文章主要介绍了react 基础知识(一)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、 安装1 (版本 react 18)

// 安装全局脚手架(create-react-app基于webpack+es6)
npm install -g create-react-app
//使用脚手架搭建项目
create-react-app my-app
// 打开目录
cd my-app
// 运行项目
npm start

react 基础知识(一),前端,react

2、初体验

import React from 'react';
// 17写法
import ReactDOM from 'react-dom';
const root = document.getElementById('root');
ReactDOM.render(<App />, root);
// 18写法
import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <h1>hello</h1>
);

3、JSX(javascript+xml的语法)

概念:jsx是js和html混合的语法,将组件结构、数据、样式聚合在一起定义组件,会编译成普通的js

  • 遇到 < 开头,用html规则解析(标签必须闭合
  • 遇到 { 开头,用js规则解析
  • 样式style等于一个对象(属性使用驼峰式命名)
  • 声明类名用clssName=类名,因为class是js关键字
export default function App() {
  return (
    <div className="App">
    // { }里面是js表达式(变量的运算符组合,如a+b),必须返回一个值
      {
        arr.map(function(item,index){
        // 渲染后为style="background-color:green"
          return <span style={{backgroundColor:'green'}} className='read_name' key={index}>{item}</span>
          
        })
      }
    </div>
  );
}
  • 判断使用三目运算符、if、&&
    注: 勿将数字放在 && 左侧 {num&& < A />} 当num=0时,会渲染0
// 三目运算	{flag? <A /> : <B />} 表示 “当 flag为真值时, 渲染 <A />,否则 <B />”。
return <span style={{backgroundColor:index==0?'green':"pink"}} >张三</span>
// if判断	选择性返回jsx
if(flag){return <h1>张三 √</h1>}
return <h1>张三 </h1>
// &&	{flag&& <A />} 表示 “当 flag为真值时, 渲染 <A />,否则不渲染”
return (
  <h1>
    张三 {flag&& '✔'}
  </h1>
);
  • 渲染列表用map,filter可以筛选需要的组件
    循环列表时必须添加key值
// map遍历见上示例
// filter 示例
arr=[{name:'张三',age:20},{name:'李四',age:10}]
let newArr=arr.filter(item=>item.age>18)

jsx中使用js的规则:

  • 引号包含的值作为字符串传递
  • {} 包含js 逻辑与变量
  • {{}} 表示包含的是一个js对象
  • 它们在内容区域属性= 后面生效

4、组件

页面分割成多个组件,每个组件有自己的逻辑与样式,不同组件可组合成一个新的页面。可组合、可重用、可维护
组件类第一个字母必须大写,只能包含一个顶层标签可用div或者是空标签<></>包起来
注:凡是首字母小写都会被识别为react元素(html标签)

(1)声明组件(导出-声明-添加)
// 第一步:导出组件 export default  一个文件只能有一个default
// 第二步:声明组件   function App(){}
export default function App() {
// 第三步:添加标签
// return 与标签不在一行,必须用()b包起来,否则什么都不会返回
  return (
    <div className="App">hello</div>
  );
  // 或写成一行
  // return  <div className="App">hello</div>
}
(2)导入与导出

同一文件中,有且仅有一个默认导出,但可以有多个具名导出
react 基础知识(一),前端,react

(3)创建组件的2种方式

第一种:函数式声明 ,function App(){} 静态组件,见(1)示例
第二种:类名组件 class App extends Component{}

import React,{Component } from 'react';
export default class App extends Component {
  // render 指该组件如何渲染,一定要返回一个react元素,且只能有一个根元素
  render(){
    return <h1>hello</h1>
  }
}

5、props(父子组件传参)

  • 传递props,需要将参数加到jsx中
  • 读取props,可使用function App({name,id})的解构语法
  • 可以指定默认值,函数式声明直接用name=“李四”,class声明用static defaultProps={name:‘李四’}
//1、函数式的demo
// 这里使用结构取出name,也可写成props.name
function Child({name}) { 
//可以给name附初始值 name="李四",当调用时没有传值,会使用默认值
// function Child({name="李四"}) { 
  return (
    <span>{name}</span>
  );
}
export default function App() {
  return (
    <div className="App">
      <Child name="张三"></Child>
  </div>
  );  
}
// 2、class类的demo
class Children extends Component{
  static defaultProps={name:'李四'} // 默认属性值,即父类调用不传递props,会使用这个默认的值
  render(){
    return(
      <h1>{this.props.name}</h1>
    )
  }
}
export default class App extends Component {  
  render(){
    return (
      <div>
        <Children name="张三"></Children>
        <Children ></Children> {/* 未传值会显示默认值“李四” */}
      </div>
    )
  }
}
  • class声明的组件可以使用prop-types指定props的类型和是否必填
// 第一步安装插件
npm install props-types -S 安装依赖
// 引入PropTypes 
import PropTypes from 'prop-types' 
class Children extends Component{
 // 定义组件的类型和是否必传
 static propTypes={
   name:PropTypes.string, // name类型为string
   age:PropTypes.number.isRequired // age   number,且必填
 }
 render(){
   return(
     <div>
       <h1>{this.props.name}</h1>
       <div>年龄:{this.props.age}</div>
     </div>
   )
 }
}
export default class App extends Component {
 render(){
   return (
     <div>
       {/* 错误写法 */}
       <Children name={1}></Children>
       {/*会提示报错,The prop `age` is marked as required in `Children`, but its value is `undefined`.
       Invalid  prop `name` of type `number` supplied to `Children`, expected `string`*/}
       
       {/* 正确写法 */}
       <Children name="张三" age={1}></Children>
     </div>
   )
 }
}

prop-types 常用类型 :array、bool、func、object、number、string、symbol、element
限制必要:PropTypes.类型.isRequired
仅限制必要:PropTypes. any.isRequired
多种类型:PropTypes.oneOfType([[PropTypes.string,PropTypes.number ])
多可选类型:PropTypes.oneOf([‘张三’,‘李四’])
特定结构对象:PropTypes.shape({name:类型,age:类型})

// 多种类型--以下代码就不会报错
 static propTypes={
    name:PropTypes.oneOfType([PropTypes.string,PropTypes.number]),
  }
<Children name={1}></Children>
// 多选类型--只能传递red和blue中的一个值,否则会报错,不能不传
static propTypes={
    color:PropTypes.oneOf(['red','blue']),
  }
 <Children color="red"></Children>  
 // 特定结构对象, 符合结构的才可以
 static propTypes={
    obj:PropTypes.shape({
        name: PropTypes.string.isRequired,
        age: PropTypes.number.isRequired
    })
  } // 符合obj={name:'xxx',age:数字}
  <Children obj={{name:'张三',age:14}}></Children>
  • props是只读,不可被修改
  • 像< Card>< Avatar />< /Card>这样的嵌套 JSX,将被视为 Card 组件的 children prop (类似于插槽)
function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

export default function App() {
  return (
    <Card>
      <Avatar
        size={100}
        person={{ 
          name: 'Katsuko Saruhashi',
          imageId: 'YfeOqp2'
        }}
      />
    </Card>
  );
}

6、状态state和事件处理

(1)state状态:组件内部变化的值
import React,{Component } from 'react';
export default class App extends Component {
  constructor(){
    super();
    this.state={name:'张三'}  // 自定义组件状态对象(组件内部变化的值,内部初始化内部改变)
  }
  // 生命周期函数   组件挂载完成
  componentDidMount(){
    // 调用setState ,状态会更新,还会重新调用render方法重新渲染
    this.setState({name:'李四'})
  }
  render(){
    return <h1>{this.state.name}</h1>
  }
}

setState是异步,不能在赋值后立即获取新state,可在其回调函数中获取

// 会先打印修改前的值,再打印修改后的值
handleClick=()=>{
        this.setState({
            num:this.state.num+1
        },()=>{
            console.log("获取修改后的值",this.state.num)
        })
        console.log("获取修改前的值",this.state.num)
    }
(2)事件处理:

class声明-----onClick={this.方法名}
function声明-----onClick={方法名}

// class声明onClick={this.方法名} 
export default class App extends Component {
  constructor(){
    super();
    this.state={heart:true}  
  }
  handleClick=()=>{
    this.setState({heart:!this.state.heart})
  }
  render(){
    return (
      <div>
        <span>心情{this.state.heart?'开心':'伤心'}</span>
        <button onClick={this.handleClick}>变心</button>
      </div>
    )
  }
}
// 函数式声明:onClick={方法名}--无实例无this
export default function App(){
    const handleClick=()=>{
        console.log('dianji')
    }
    return(
        <>
        <button onClick={handleClick}>点击</button>
        </>
    )
}

7、表单组件的双向绑定、refs

(1)双向绑定

受控组件:受当前组件的状态控制
非受控组件:不受当前组件状态控制

export default class App extends Component{
    constructor(){
        super()
        this.state={name:'张三'}
    }
    handleChange=(event)=>{
        // 通过获取输入框的值实现双向绑定
        this.setState({name:event.target.value})
    }
    render(){
        return (
        <div>
            <div>hello,{this.state.name}</div>
            {/* 受控组件,必须加change事件 */}
            <input onChange={this.handleChange} value={this.state.name}></input>
            {/* 非受控组件,随便输 */}
            <input onChange={this.handleChange} ></input>
        </div>
        )
    }
}
(2)refs:可获取DOM元素及其实例

class有三种(refs字符串、 refs回调函数、createRef)、

// class声明有实例,所以可以用字符串refs|回调函数|createRef()三种方式,以下是示例
export default class App extends Component{
    constructor(){
        super()
        this.myRef=React.createRef() // 3、createRef方式
    }
    handleChange=(event)=>{
        console.log(this.refs.test.value,'方式一:已废弃')
        console.log(this.b.value,'方式二:回调函数')
        console.log(this.myRef.current.value,'方式三:createRef,获取元素是.current')
    }
    render(){
        return (
        <div  onChange={this.handleChange}>
            {/* refs--字符串方式,已经被废弃,使用会被浏览器警告 */}
            <input ref="test"></input>
            {/* refs--回调函数,会执行2次,一次传参null,一次传参dom元素 */}
            <input ref={ref=>this.b=ref}></input>
            {/* refs--createRef方式,dom元素为.current属性*/}
            <input  ref={this.myRef}></input>
        </div>
        )
    }
}

function也有三种(useRef、React.forwardRef、React.useImperativeHandle)

// 因为function没有实例,所以不能用class的三种refs的方式
// 方式一:useRef,.current获取组件实例
export default function App(){
    const myRef=useRef(null)
    const handleClick=()=>{
        myRef.current.focus()
    }
    return(
        <>
        <input type="text" ref={myRef} />
        <button onClick={handleClick}>点击聚焦</button>
        </>
    )
}
// 方式二:forwardRef,该ref绑定的值是组件内ref绑定的节点而非组件实例,组件实例是不可以访问该回调ref函数
import React, { Component, forwardRef} from 'react';
const Test=forwardRef(function (props,ref){
    return <h1 ref={ref}></h1>
})
export default class App extends Component{
    constructor(){
        super()
        this.myRef=null
    }
    handleClick=()=>{
        this.myRef.innerHTML="加油哦"
    }
    render(){
        return (
        <div>
            <Test type="text" ref={ref=>this.myRef=ref} />
            <button onClick={this.handleClick}>点击聚焦</button>
        </div>
        )
    }
}
//方式三:useImperativeHandle,结合forwardRef使用
const Test=forwardRef(function (props,ref){
    const inputRef = React.useRef();
    React.useImperativeHandle(ref, () => ({
        focus: () => {
            inputRef.current.focus();
        },
    }));
    return <input ref={inputRef }/>
})
export default class App extends Component{
    constructor(){
        super()
        this.myRef=null
    }
    handleClick=()=>{
        this.myRef.focus()
    }
    render(){
        return (
        <div>
            <Test type="text" ref={ref=>this.myRef=ref} />
            <button onClick={this.handleClick}>点击聚焦</button>
        </div>
        )
    }
}

8、组件的生命周期

(1)class声明才有生命周期

react 基础知识(一),前端,react
声明周期执行示例:

export default class App extends Component{
    constructor(){
        super()
        this.state={num:0}
        console.log('constructor:初始化')
    }
    static getDerivedStateFromProps(){
        console.log('getDerivedStateFromProps:组件即将加载或发现state、props变化')
        return null
    }
    handleClick=()=>{
        console.log('准备变值')
        this.setState({
            num:this.state.num+1
        },()=>{
            console.log("获取修改后的值",this.state.num)
        })
    }
    shouldComponentUpdate(newProps,newState){
        console.log('shouldComponentUpdate:是否应该变化')
        return !newState.num%5==0
    }
    getSnapshotBeforeUpdate(){
        console.log('getSnapshotBeforeUpdate:将要更新')
        return null
    }
    componentDidUpdate(){
        console.log('componentDidUpdate:更新结束')
    }
    render(){
        console.log('render:组件开始挂载')
        return (
        <div>
            <p>{this.state.num}</p>
            <button onClick={this.handleClick}>点击聚焦</button>
        </div>
        )
    }
    componentDidMount(){
        console.log('componentDidMount:组件挂载完成')
    }
    componentWillUnmount(){
        console.log('componentWillUnmount:卸载前')
    }
    
}

react 基础知识(一),前端,reactreact 基础知识(一),前端,react
注:componentWillMount、componentWillUpdate、componentWillReceiveProps已经被官方废弃,请尽量用上图的生命周期函数

(2)函数式声明没有生命周期,一般用useEffect替代

其作用同componentDidMount、componentDidUpdate、componentWillUnmount

export default function App(){
    const [num, setNum] = useState(0);
    const [num1, setNum1] = useState(1)
    // 1、useEffect 第二个参数为空useEffect(()=>{}),初始化渲染之后执行一次,当页面所有数据变化时也会执行一遍,同componentDidMount、componentDidUpdate,-----初始化执行、点击按钮1和2都会执行
    // 2、useEffect 第二个参数为空数组useEffect(()=>{},[]),初始化渲染render之后只执行一次,数据变化不执行,同componentDidMount---初始化执行、点击按钮1、2不执行
    // 3、useEffect 第二个参数为监听值,useEffect(()=>{},[num]),初始化渲染render之后执行一次,监听元素变化执行一次,同componentDidMount、componentDidUpdate----初始化执行、点击按钮2才会执行
    useEffect(()=>{
        console.log('useEffect')
    },[num1])
    // 4、useEffect 第一个函数返回一个函数,表示在组件卸载前执行,同componentWillUnmount  useEffect(()=>{return ()=> {// 在此走一些收尾工作,如清除定时器/取消订阅等}},[stateValue])
    return(
        <>
        <p>{num}</p>
        <button onClick={()=>setNum(num+1)}>点击1</button>
        <p>{num1}</p>
        <button onClick={()=>setNum1(num1+1)}>点击2</button>
        </>
    )
}

  1. 若安装脚手架时报以下错,将npm切换成淘宝镜像即可安装成功
    react 基础知识(一),前端,react↩︎文章来源地址https://www.toymoban.com/news/detail-687845.html

到了这里,关于react 基础知识(一)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【前端知识】React基础巩固(二)——JSX注意点

    createElement存在的问题: 繁琐不简洁 不直观,无法一眼看出所描述的结构 不优雅,开发体验不好 JSX 简介:JSX 是 JavaScript XML 的简写,表示了在JS代码中写XML(HTML)格式的代码 优势:声明式语法更加直观,与HTML结构相同,降低学习成本,提高开发效率 JSX 是 react 的核心内容‘

    2024年02月09日
    浏览(70)
  • 【前端知识】React 基础巩固(二十三)——React 性能优化 SCU相关

    React 的渲染流程 JSX - 虚拟 DOM - 真实 DOM React 的更新流程 props/state 改变 - render函数重新执行 - 产生新的DOM树 - 新旧DOM树进行diff - 计算出差异进行更新 - 更新到真实的DOM React 在 props 或 state 发生改变时,会调用 React 的 render 方法,会创建一颗不同的树 React 需要基于这两颗不同的

    2024年02月15日
    浏览(72)
  • 【前端知识】React 基础巩固(三十五)——ReduxToolKit (RTK)

    Redux Tool Kit (RTK)是官方推荐的编写Redux逻辑的方法,旨在成为编写Redux逻辑的标准方式,从而解决上面提到的问题。 RTK的核心API主要有如下几个: configureStore:包装createStore以提供简化的配置选项和良好的默认值。它可以自动组合你的slice reducer,添加你提供的任何Redux中间件

    2024年02月15日
    浏览(66)
  • 【前端知识】React 基础巩固(二十六)——Portals 的使用

    通常,组件会渲染到 root 节点下。可使用 Portals 将组件渲染至其他节点。 添加 id 为 more、modal 的 div 元素 构建 Modal.jsx, 通过 createPortal 把组件渲染到指定的 modal 节点下 构建 App.jsx 查看渲染结果

    2024年02月16日
    浏览(49)
  • 【前端知识】React 基础巩固(三十一)——Redux的简介

    概念 纯函数(确定的输入一定产生确定的输出,函数在执行过程中不产生副作用): 在程序设计中,若一个函数符合以下条件,那么这个函数就被称为纯函数 此函数在相同的输入值时,需产生相同的输出 函数的输出和输入值以外的其他隐藏信息或状态无关,也和由I/O设备产

    2024年02月16日
    浏览(53)
  • 【前端知识】React 基础巩固(七)——JSX 的基本语法

    JSX 是一种 JS 的语法扩展(extension),也可以称之为 JavaScript XML,因为看起来就是一段 XML 语法 它用于描述我们的 UI 界面,并且其可以和 JS 融合在一起使用 它不同于 Vue 中的模块语法,不需要专门学习模块语法中的指令 React 认为 渲染逻辑 本质上与 其他UI逻辑 存在内在耦合

    2024年02月10日
    浏览(60)
  • 【前端知识】React 基础巩固(十九)——组件化开发(三)

    Main.jsx TabControl/index.jsx TabControl/style.css

    2024年02月13日
    浏览(54)
  • 【前端知识】React 基础巩固(四十三)——Effect Hook

    Effect Hook 用来完成一些类似class中生命周期的功能。 在使用类组件时,不管是渲染、网路请求还是操作DOM,其逻辑和代码是杂糅在一起的。例如我们希望把计数器结果显示在标签上,在类组件中,我们通过生命周期进行实现,如下所示: 在函数组件中,我们可以利用useEffec

    2024年02月14日
    浏览(70)
  • 【前端知识】React 基础巩固(十七)——组件化开发(一)

    什么是组件化开发? 分而治之的思想 将一个页面拆分成一个个小的功能块 将应用抽象成一颗组件树 React的组件相对于Vue更加的灵活和多样 按照不同的方式可以分为很多类组件 根据 组件的定义方式 ,分为: 函数组件 、 类组件 根据 组件内部是否有状态需要维护 ,分为:

    2024年02月12日
    浏览(68)
  • 【前端知识】React 基础巩固(三十九)——React-Router的基本使用

    Router中包含了对路径改变的监听,并且会将相应的路径传递给子组件。 Router包括两个API: BrowserRouter使用history模式 HashRouter使用hash模式(路径后面带有#号) 尝试在项目中使用HashRouter: 安装Router 在 index.js 中引入并使用HashRouter Routes:包裹所有的Route,在其中匹配一个路由(

    2024年02月14日
    浏览(66)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包