react基础入门

发布时间:2024年01月12日

1,了解react

react并不是一个MVC框架,他只是一个很强大的javaScript库,主要作用是用来构建UI界面。

react的核心是封装一个个大大小小的组件(小到一个按钮,大到一个页面)来构建复杂的UI界面,每个组件都是UI的一部分。

react的组件就是返回标签的javaScript函数。例如:

function MyButton() {? ?

????????return ( <button>I'm a button</button> );? ?

}

2,react特点

  • 速度快 - react使用虚拟DOM
  • 跨浏览器兼容 -?因为虚拟DOM,提供了标准的API,解决了不同浏览器的语法不同问题
  • 组件化 -?将每个模块都抽成组件,提升了可维护性
  • 单向数据流 -?数据对应DOM树从上到下流动,数据流更清晰,组件的状态就更可控
  • 纯粹的javaScript语法 -?没有react的单独语法,因此在react中,一些皆js

3,react组件

3.1?了解组件

从以上概念可知,react组件就是一部分的js逻辑,封装的独立的可复用的代码片段,这样每个片段都可以进行独立的管理,很好的实现了代码的复用。

注意:组件的首字母必须要大写

3.2 组件分类

函数(function)组件

函数式组件其实就是官网的标准案例,定义一个函数,接受任意的props参数,函数中返回jsx语法的页面UI内容。

示例:

export default function MyApp() {  
    return (  
        <div>  
            <h1>Welcome to my app</h1>  
            <MyButton />  
        </div>  
    );  
}

类(class)组件

通过声明ES6中的类(class)来定义一个React组件。其中,必须要继承React.Component类或React.PureComponent类;类中必须要定义一个名为render的函数,该函数的返回值是JSX语法编写的React元素。

class组件不同于函数组件的是,class组件会创建对应的实例,因此只有class组件才有生命周期

注意

  • 类的内部默认会有个props属性(继承自Component),可以直接使用
  • 在类的构造函数(constructor)中通过this.props访问属性值是获取不到的,因为这时props还没有挂载到this.props上,等到constructor执行完成之后才会挂载(除非把外面传进来的props传递给constructor中的父类构造函数super从而实现this.props的挂载
  • 类组件是动态组件,基于数据驱动视图渲染

示例:

// 创建一个类式组件
import React from 'react' ?
class Mycomponent extends React.Component { ? ?
  constructor(props){ ? ? ? ?
    super(props) ? 
  }

  render(){ ? ? ? ?
    return( ? ? ? 
      <div>hello Mycomponent!</div> ? ? ? 
    ) ? 
  } 
}
export default Mycomponent 


// 渲染到页面中的指定DOM
// ReactDOM.render(虚拟DOM,真实DOM)
ReactDOM.render(<MyComponent />, document.getElementById('test'))
let c = new MyComponent()

3.3?组件数据传递

如果想传递数据给子组件,可通过props方式:

(1)在引用组件的标签处通过 props属性名={属性值}?的方式来设置传入的props

(2)在子组件入参处通过解构的方式获取props

示例:

function MyApp() {
 // 传递给MyLabel组件两个props,info和height
  return (
    <MyLabel
      info={{ name: '张三', id: '123' }}
      height={100}
    />
  );
}

// MyLabel组件,可以获取传入的props
function MyLabel({info, height}) {
    // ... ...
}

4,了解JSX语法

概念:JSX(JavaScript XML)首先被应用在react中,他是一种javaScript语法的扩展,比较类似于模板语言。他最终产生的是js对象既不是字符串(不要加引号)也不是html/xml标签

作用:用来简化创建虚拟DOM,使代码更简洁,更容易维护。

需要注意的规则

  • 标签首字母小写,则会被转换成html的同名元素,如果html没有这个元素,就报错
  • 标签首字母大写,则react就会渲染对应的组件,如果没有定义该组件,就报错
  • 标签属性没有引号,通常使用大扩号{}(eg:<h1 id={myId}>Hello,</h1>)
  • 内联样式style={{key:value}}有两个大括号第一个括号表示里面是一个js表达式,第二个括号表示里面是一个键值对(eg:<span style={{color:'#e0e0e0', fontSize:18}}>内容</span>)
  • 虚拟DOM只能有一个根标签
  • 属性使用小驼峰形式写法(eg:font-size写成fontSize)
  • 必须闭合标签

参考:JSX基本语法规则

辅助工具:

5,更新界面useState和HOOK

useState使用:

(1)引入useState:import { useState } from 'react';

(2)自定义state变量和set方法:const [sth,?setSth] = useState(initialValue)

(3)使用:通过sth直接取值通过setSth(value)更新值

HOOK理解

以useXXX开头的函数被称为HOOK,React内置了很多的HOOK供用户使用,useState就是其中一种。其他的还有useContext(读取和订阅组件中的context)、useRef(帮助引用一个不需要渲染的值)等。具体可查看官方API

同时React支持自定义HOOK

HOOK的调用说明

HOOK的要求比较严格,必须在组件顶层调用,如果想在一个循环或者条件逻辑中调用,只能再抽一个子组件放在顶层调用。

6,入门学习文档

快速入门 – React 中文文档icon-default.png?t=N7T8https://react.docschina.org/learn

文章来源:https://blog.csdn.net/wjs0406/article/details/135523207
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。