React的基础

最新推荐文章于 2024-06-25 22:33:42 发布

xiaoliuya····

最新推荐文章于 2024-06-25 22:33:42 发布

阅读量160

点赞数

分类专栏： React 文章标签： react.js 前端

本文链接：https://blog.csdn.net/weixin_46643178/article/details/125775361

版权

React 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.React是一个专注于构建用户界面的 JavaScript 库，和vue和angular并称前端三大框架，不夸张的说，react引领了很多新思想，世界范围内是最流行的js前端框架，最近发布了18版本，加入了很多新特性。

React英文文档（https://reactjs.org/）

React中文文档（https://zh-hans.reactjs.org/）

2.React的特点：声明式（jsx），组件化。

环境初始化：

使用脚手架创建项目：

npx create-react-app project

说明：
npx create-react-app 是固定命令，project是React脚手架的名称

project表示项目名称，可以自定义，保持语义化

npx 命令会帮助我们临时安装create-react-app包，然后初始化项目完成之后会自自动删掉，所以不需要全局安装create-react-app

启动项目

    yarn start
    or
    npm start

2. 项目目录说明

目录说明

src 目录是我们写代码进行项目开发的目录

package.json 中俩个核心库：react 、react-dom

2.1 目录调整

删除src目录下自带的所有文件，只保留app.js根组件和index.js

创建index.js文件作为项目的入口文件，在这个文件中书写react代码即可

2.2 入口文件说明

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
// 引入根组件App
import App from './App'
// 通过调用ReactDOM的render方法渲染App根组件到id为root的dom节点上
ReactDOM.render(  <React.StrictMode>    
<App />  
</React.StrictMode>,
document.getElementById('root'))

JSX基础

概念：JSX是 JavaScript XML（HTML）的缩写，表示在 JS 代码中书写HTML 结构

作用：在React中创建HTML结构（页面UI结构）

优势：

采用类似于HTML的语法，降低学习成本，会HTML就会JSX

充分利用JS自身的可编程能力创建HTML结构

注意：JSX 并不是标准的 JS 语法，是 JS 的语法扩展，浏览器默认是不识别的，脚手架中内置的 @babel/plugin-transform-react-jsx 包，用来解析该语法

可以使用的表达式

字符串、数值、布尔值、null、undefined、object（ [] / {} ）
1 + 2、‘abc’.split(‘’)、[‘a’, ‘b’].join(‘-’)
fn()

特别注意
if 语句/ switch-case 语句/ 变量声明语句，这些叫做语句，不是表达式，不能出现在 {} 中！！

//识别常规的变量
const name = "小刘"

//原生调用的方法、
const getAge = () => {
    return 15
}
//三元表达式
const flges = false

function App() {
    return (
        <div className="App">
            {name}
            <p>{getAge()}</p>
            <p> {flges ? '加油' : 'yyds'}</p>
        </div>
    );
}

export default App;

3. JSX列表渲染

实现：使用数组的map 方法

//react的渲染
//1使用mao重复渲染模板
//遍历列表的时候需要加key属性
const list = [
    {id: 0, name: 'xiaoliu'},
    {id: 1, name: 'xiaoho'},
    {id: 2, name: 'xiaozhu'}
]

function App() {
    return (
        <div className="App">
            <div>
                {
                    list.map(item => <div key={item.id}>{item.name}</div>)
                }
            </div>
        </div>
    );
}
export default App;

key 在 HTML 结构中是看不到的，是 React 内部用来进行性能优化时使用

key 在当前列表中要唯一的字符串或者数值（String/Number）

如果列表中有像 id 这种的唯一值，就用 id 来作为 key 值

如果列表中没有像 id 这种的唯一值，就可以使用 index（下标）来作为 key 值

JSX条件渲染
实现：可以使用三元运算符或逻辑与(&&)运算符

/条件渲染
//使用三元表达式--满足条件再渲染
//2.&&
const tip = false;

function App() {
    return (<div className="App">
        {
            tip ? (<div> okk</div>) : null
        }
        {tip && <div>条件判断&</div>}
        {tip || <div>条件判断||</div>}

    </div>);
}

export default App;
//复杂的多分支的逻辑 写成一个函数 通过专门的函数写分支逻辑 模板中调用
const gettype = (type) => {
    if (type == 1) {
        return <div> 这是type值为1</div>
    }  if (type === 2) {
        return <div> 这是type值为2</div>
    }
}

function App() {
    return (
        <div className="App">
            {gettype(1)}
            {gettype(2)}
        </div>);
}

export default App;

JSX样式处理

行内样式 - style
类名 - className（推荐）

//行内样式 style={{}}
//类名样式 className属性
import './index.css'

const style = {
    color: 'yellow', fontSize: '18px'
}
//动态控制类名
const active = false

function App() {
    return (
        //必須有一個跟節點
        <>
            <span style={style}>今天也要开开心心</span>
            <div style={{color: 'red', fontWeight: 500}}>明天也会开开心心</div>
            <div className='list'>是类名啊</div>
            <div className={active ? 'list' : ''}>显示</div>
        </>
    );
}

export default App;