前端学习--React(1)

一、React简介

React由Meta公司研发，是一个用于 构建Web和原生交互界面的库

优势：组件化开发、不错的性能、丰富生态（所有框架中最好）、跨平台（web、ios、安卓）

开发环境搭建

打开相应文件夹 新建终端并输入

npx create-react-app react1

就可以得到一个名为react1 的项目

运行一下↓

在package.json中，这是两个核心依赖包

"react": "^18.2.0",
"react-dom": "^18.2.0",

 下面是可以执行的命令，开发阶段执行start，开发完毕打包执行build

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

所有的开发工作在src中执行，最开始只保留App.js和index.js即可

然后精简一下App.js和index.js

//index.js
 
//项目入口
//导入必要的核心包
import React from 'react';
import ReactDOM from 'react-dom/client';
//导入项目根组件
import App from './App';
//把App根组件渲染到index.html中id为root的dom节点上
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <App />
);

//App.js
//项目根组件
function App() {
  return (
    <div className="App">
      this is react
    div>
  );
}
 
export default App;

二、JSX基础

JSX基础和概念

JSX是JavaScript和XML（HTML）的缩写，表示在JS代码中编写HTML模版结构,它是React中编写 UI模版的方式

既具有HTML声明式写法，又有JS的可编程能力

JSX在原生JS中无法被识别，那如何渲染到浏览器中？

JSX本质

是js语法扩展，需要解析工具（babel）才能在浏览器中运行

Babel · Babel (babeljs.io)

 JSX场景

jsx可以通过{}识别js表达式，有以下四种情况：

1. 使用引号传递字符串

2. 使用JavaScript变量

3. 函数调用和方法调用

4. 使用JavaScript对象

function printName(){
  return 'Rose'
}
 
function App() {
  const count = 1000
  return (
    <div className="App">
      {/*1 使用引号传递字符串 */}
      {'this is react project'}
 
      {/* 2 识别js变量 */}
      {count}
 
      {/* 3 函数调用 */}
      {printName()}
 
      {/* 4 方法调用 */}
      {new Date().getDate()}
 
      {/* 5 使用js对象 */}
      {/* 外层花括号是识别表达式的语法，内层是对象结构 */}
      <div style={{color : 'red'}}>this is red colordiv>
    div>
  );
}
 
export default App;

 

JSX列表渲染

核心方法是map，循环哪个结构就在map里return哪个结构，不要忘记每个循环元素都要有唯一标识key

const list = [
  {
    name:'Alice',
    id:1001
  },
  {
    name:'Bob',
    id:1002
  },
  {
    name:'Candy',
    id:1003
  }
]
 
function App() {
  return (
    <div className="App">
      this is a list
      <ul>
        {list.map(item => <li key={item.id}>{item.name}li>)}
      ul>
    div>
  );
}

JSX条件渲染

基础情况

可以通过逻辑与&&（控制一个元素）和三元表达式：？（两个元素）实现基础的条件渲染

const showSpan = true
function App() {
  return (
    <div className="App">
      {/* 逻辑& */}
      {showSpan && <span>hellospan>}
 
      {/* 三元表达式 */}
      {showSpan ? <span> showSpan为truespan> : <span>showSpan为falsespan>}
    div>
  );
}

复杂情况

用if-else

const type = 1
function getType(){
  if(type === 1){
    return <div>我是1div>
  }else if(type === 2){
    return <div>我是2div>
  }else{
    return <div>我是3div>
  }
}
function App() {
  return (
    <div className="App">
      {/* 逻辑& */}
      {getType()}
    div>
  );
}

三、事件绑定

 on + 事件名称 = { 事件处理程序 }，整体上遵循驼峰命名

function App() {
  let count = 0
  const handleClick = () => {
    count ++
    console.log('button被点击了'+count)
  }
  return (
    <div className="App">
      <button onClick={handleClick}> click button>
    div>
  );
}

如果是自定义参数，要写成箭头函数

<button onClick={() => handleClick(1)}> click button>

事件对象e和自定义参数都需要

<button onClick={(e) => handleClick(e, 1)}> click button>

 四、React组件

在不同的前端框架，组件是通用概念，组件之间可以嵌套也可以复用

const Button = () => {
  return <button>Clickbutton>
}
function App() {
  return (
    <div className="App">
      <Button>Button>
      <Button/>
    div>
  );
}

五、useState

useState 是一个 React Hook（函数），它允许我们向组件添加一个状态变量, 从而控制影响组件的渲染结果

即数据驱动视图

下面是一个典型自增按钮

import { useState } from "react";
function App() {
  //count是状态变量， setCount是修改变量的方法 每次修改count必须调用setCount
  const [count, setCount] = useState(0)
  const handleClick = () => {
    setCount(count + 1)
  }
  return (
    <div className="App">
      <button onClick={handleClick}>{count}button>
    div>
  );
}

react中的状态只读，每次应该通过修改状态的函数来替换，直接修改不能引发视图更新

修改对象属性

import { useState } from "react";
function App() {
  const [student, setStu] = useState({name:'Jack',age:20})
  const handleClick2 = () => {
    setStu({
      ...student, //这一行保留，那么只修改name一个属性，反之原有属性都会被覆盖掉
      name:'XiaoMing'
    })
    console.log(student)
  }
  return (
    <div className="App">
      <button onClick={handleClick2}>{student.name}button>
    div>
  );
}

六、组件样式处理

行内样式

const style = {
  color:'pink',
  fontWeight:'700',
  fontSize:'20px'
}
function App() {
  return (
    <div className="App">
      <span style={style}> 11 span>
    div>
  );
}

class类名控制

//index.css
.fc-lightblue{
    color: lightblue;
}
 
//index.js
import './index.css'
function App() {
  return (
    <div className="App">
      <span className='fc-lightblue'> 11 span>
    div>
  );
}

案例应用

lodash数组排序

Lodash Documentation

npm i lodash

_.orderBy(collection, [iteratees=[_.identity]], [orders])
//参数分别是 要排序的数组 排序参照属性 排序方法(asc/desc)

classnames动态控制类名

npm i classnames

import classNames from 'classnames'
 
classNames('class1', {class2: type === item.type})}>
    {item.text}