2022-03-27 React 第一天

一、React基本使用

1.安装

npm i react react-dom

react 包是核心，提供创建元素，组件等功能；react-dom 包提供DOM相关功能。

2. 在页面中引用（了解）

（1）引入react和react-dom的两个js文件

<!-- 1.引入react依赖 -->
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

（2）创建React元素，并挂载到页面（和虚拟DOM对象是一个东西）

        <script>
            // 2.创建DOM元素
            // 参数一：元素名称
            // 参数二：元素的属性配置对象(可以为null)
            // 参数三以及之后的参数：元素子节点
            const title = React.createElement(
                'h1',
                { id: 'box', title: 'h1标签的属性' },
                'Hello react!',
                React.createElement('span', null, '我是span节点')
            );

            // 3.挂载DOM元素
            // 参数一：要挂在的react元素
            // 参数二：挂载到哪个DOM里面
            ReactDOM.render(title, document.getElementById('root'));
        </script>

注意：如果在HTML页面中下载react包，首先初始化package.json。npm init -y

二、使用React脚手架初始化项目

1.无需安装脚手架包，就可以直接使用npx包提供的初始化命令：

npx create-react-app my-react

2.启动项目，在项目根目录执行命令：

 npm start

3.脚手架中使用React
使用import关键字导入react、react-dom包后，即可使用

import React from 'react'
import ReactDOM from 'react-dom'

yarn命令简介

初始化新项目：yarn init
安装包： yarn add 包名称
安装项目依赖： yarn

三、JSX的简单使用（Hooks通用）

1.创建JSX

// 使用 小括号包裹JSX，从而避免JS中自动插入分号报错
const name = (
  <div>我是一个JSX</div>
)
ReactDOM.render(name, document.getElementById('root'))

2.嵌入JS表达式

语法：{ JavaScritp表达式 }

（1）一个JSX要用一个 根节点 元素包裹。
（2）只要是合法的 $\color{red}{js表达式}$ 都可以进行嵌入。（JSX自身也是js表达式）
（3）js中的对象是一个例外，一般只会出现在 style 属性中。
（4）在{}中不能出现 $\color{red}{语句}$ ，如if语句、for循环语句等。
（5）什么是表达式？ $\color{red}{表达式会产生一个值}$ ，可以在左侧用 $\color{red}{const\ \ a =}$ 接收，常见的表达式：
变量：a、a+1
函数调用：fn()
方法调用：arr.map()、new Date().getDay()

// 在JSX中使用js表达式
const age = 22 //初始化变量
const sayHi = () => 'Hello react!' //定义函数

const jsBox = (
  // 一个JSX要用一个根节点元素包裹
  <div>
    {/* 变量 */}
    <div>{age}</div>
    {/* 函数调用 */}
    <div>{sayHi()}</div>
    {/* 方法调用 */}
    <div>{new Date().getFullYear()}</div>
    {/* js中的数据也是表达式 */}
    <div>{1}</div>
    <div>{'a'}</div>
    <div>{1 + 1}</div>
    <div>{3 > 5 ? '大于' : '小于或等于'}</div>

    {/* 错误示例 */}
    {/* 单花括号内不能放js对象，一般只用于style样式中;也不能是if语句、for循环语句 */}
    {/* <div>{{ a: '我是a' }}</div>
    <div>{if(true){}}</div>
    <div>{ for(let i = 0;i<10;i++){}}</div> */}
  </div>

)
ReactDOM.render(jsBox, document.getElementById('root'))

3.条件渲染

（1）条件渲染：if语句、三元表达式、逻辑与运符

let isShow = true
// if语句
ifShow = () => {
  if (isShow) {
     return (<div>渲染成功</div>)
  }
  return (<div>此处隐藏</div>)
}

// 三元表达式
ifShow = () => isShow ? (<div>渲染成功</div>) : (<div>此处隐藏</div>)

// 逻辑与运算符：当isShow为真时才渲染后面的JSX
ifShow = () => isShow && (<div>渲染成功</div>)

const ifBox = (
  <div>{ifShow()}</div>
)
ReactDOM.render(ifBox, document.getElementById('root'))

4.列表渲染

（1）如果需要渲染一组数据，我们应该使用数组的 map () 方法。
（2）渲染列表的时候需要添加 key属性，key属性的值要保证唯一。
（3）原则：map()遍历谁，就给谁添加key属性。
（4）尽量避免使用 索引号 作为key。

// 循环渲染：map()函数，遍历旧数组，返回一个新数组，新数组的元素都是由旧数组元素一一映射而来。
// 必须有key值，且key值要唯一。避免使用索引值
const arr = [
  { id: 1, name: '马冬梅' },
  { id: 2, name: '王祖贤' },
  { id: 3, name: '吴彦祖' }
]
const forBox = (
  <ul>
    {arr.map(item =>
      (<li key={item.id}>{item.name}</li>)
    )}
  </ul>
)
ReactDOM.render(forBox, document.getElementById('root'))

5.样式处理

（1）用 className 代替 class。
（2）style 的单括号内可以放 js对象。
（3）可以安装并引用 classnames库，调用常用的AIP方法。

import classNames from 'classnames'

// 样式处理
const styleBox = (
  <div className="a1">                                                   // className用法
    <span style={{ color: 'red' }}>......</span>                         // 行内样式用法
    <span className={classNames("b1 b2 ",{c1: false, c2:true})}></span>  // classnames库的用法
  </div>
)
ReactDOM.render(styleBox, document.getElementById('root'))

6.图片引入

（1）必须把图片 先引入到页面，将引入的图片放到img标签的 src属性 位置。

import Icon from '@/assets/img/icon.png';
<img src={Icon} alt="" style="width:14px; height:16px; margin-left:5px; vertical-align:-2px" />

7. 插槽使用

......

四、React组件（函数组件与Hooks通用）

React16.8之前，函数组件是 无状态组件，只负责数据展示；类组件是 有状态组件，负责更新UI，在 类组件 中用 setState 修改state数据；

React16.8之后，统一使用 $\color{red}{函数组件}$ ，用Hooks中的 $\color{red}{useState}$ 维护和修改state数据。

1.函数组件

（1）函数名 首字母大写，React据此来区分组件和普通react元素。
（2）必须有 返回值，返回的内容表示该组件的结构。可以返回null。

// function Hello () {
//   return (
//     <div>Hello React!</div>
//   )
// }
const Hello = () => <div>Hello React!!!</div>
ReactDOM.render(<Hello />, document.getElementById('root'))

2.类组件

（1）类名称必须要 大写字母 开头。
（2）类组件应该 继承React.Component父类，从而可以使用父类中提供的方法或者属性。
（3）类组件必须提供 render 方法。
（4）render方法中必须要有 return返回值。

// 类组件
// 组件名首字母大写;必须继承自React.Component父类;内部必须有render()函数;render()函数必须有返回值
class Hi extends React.Component {
  render () {
    return (
      <div>Hi React!</div>
    )
  }
}
ReactDOM.render(<Hi />, document.getElementById('root'))

3.将组件抽离成单独的.js文件

// 导入react
import React from 'react'

// 创建组件
class Hello extends React.Component {
  render () {
    return (
      <div>Hello React!我是单独抽离的组件</div>
    )
  }
}

// 导出组件
export default Hello

4.组件的事件绑定

（1） $\color{red}{类组件中有this，函数组件中没有this}$
（2）函数组件事件绑定

不传参：onClick={handleClick}
传参：onClick={(e)=>handleClick('自定义参数',e)}

// 函数组件绑定事件
// 函数组件内部没有this
function Appp () {
  function handleClick () {
    console.log('事件绑定函数触发了！');
  }
  return (
      {/* 不传参 */}
    <button onClick={handleClick}>按钮1</button>
      {/* 传参 */}
    <button onClick={(e)=>handleClick('自定义参数',e)}>按钮2</button>
  )
}
ReactDOM.render(<Appp />, document.getElementById('root'))

（3）类组件事件绑定

（1）绑定时的两种写法：
不传参：onClick={handleClick}
传参：onClick={(e)=>handleClick('自定义参数',e)}
（2）函数声明必须用 $\color{red}{箭头函数}$ 的形式。

class Index extends React.Component {
  handleClick1 = (event) => {
    console.log('输入框的value是：',event.target.value);  // false
  }
  handleClick2 = (a) => {
    return (event) => {
      console.log(a); // '自定义内容'
      console.log('输入框的value是：',event.target.value); // false
    }
  }
  handleClick3 = (event,a) => {
    console.log('输入框的value是：', event.target.value);  // false
    console.log(a); // false
  }
  render () {
    return (
      <div>
        <button value="false" onClick={this.handleClick1}>按钮1</button>
        <button value="false" onClick={this.handleClick2('自定义参数')}>按钮2</button>
        <button value="false" onClick={ (event)=>this.handleClick3(event,'自定义参数')}>按钮3</button>
      </div>
    )
  }
}

注意：
① render()函数中的this指向 组件实例；(constructor构造函数也是)。
② 事件处理函数中的this是 undefined，无法调用组件实例的setState()方法。
③ 这是给事件添加处理方法需要用箭头函数，如果是获取接口数据的方法，可以直接写在配置对象中。

5.React事件绑定说明

（1）通过 onClick 形式为组件绑定事件。（注意大小写）
（2）React用的是自己封装的事件，而不是原生的DOM事件。（为了更好的兼容性）
（3）React中的事件时通过 事件委托 来处理的，委托给 组件最外层元素。（为了更高效）
（4）通过 event.target 获取到实际触发事件的DOM元素。
（5）onClick={this.handleClick} 是将 handleClick 函数本身 作为点击事件的处理函数。
（6）onClick={this.handleClick()} 是将handleClick函数的 返回值 作为点击事件的处理函数。

五、类组件中绑定事件处理函数其他方案

方案一：利用箭头函数（了解即可）

在箭头函数中返回事件处理函数的调用，将render()函数的this传递给事件处理函数

// 方案一：利用箭头函数
class ChangeThis1 extends React.PureComponent {
  state = {
    count: 1
  }
  handleClick () {
    this.setState({ count: this.state.count + 2 })
  }
  render () {
    return (
      <div>
        <div>{this.state.count}</div>
        <button
          //在箭头函数中返回事件处理函数的调用，将render()函数的this传递给事件处理函数
          onClick={() => this.handleClick()}
        >
          +1
        </button>
      </div>
    )
  }
}
ReactDOM.render(<ChangeThis1 />, document.getElementById('root'))

方案二：通过bind方法，更改事件处理函数中的this（了解即可）

在构造函数中将事件处理函数中的this绑定为组件实例

// 方案二：通过bind方法，更改事件处理函数中的this（了解）
class ChangeThis2 extends React.PureComponent {
  constructor () {
    super()
    this.state = {
      count: 1
    }
    // 在构造函数中将事件处理函数中的this绑定为组件实例
    // 1.下面代码是右侧内容赋值给左侧，此时this代表的 【ChangeThis2】 实例对象上并没有handleClick函数，
    // 2.而是通过原型链拿到了原型对象上的 【handleClick】函数，并同过bind方法改变了this指向。
    // 3.bind方法返回一个新的函数，此时在this实例对象上我们手动创建了【newHandler】函数进行接收。
    // 4.最终事件绑定的处理函数，是实例对象上的【newHandler】。
    this.newHandleClick = this.handleClick.bind(this)
  }
  handleClick () {
    this.setState({ count: this.state.count + 3 })
  }
  render () {
    return (
      <div>
        <div>{this.state.count}</div>
        <button
          onClick={this.newHandleClick}
        >
          +1
        </button>
      </div>
    )
  }
}
ReactDOM.render(<ChangeThis2 />, document.getElementById('root'))