React 基础笔记 01

React 介绍

1. 什么是 React

React 是一个用于构建用户界面的 JavaScript 库（轻量级的视图层库）

1. React 的特性

声明式：React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。
组件化：通过 React 构建组件，使代码更容易复用。
高效：React 通过操作虚拟 DOM ，最大限度的减少了与真实 DOM 的交互。
灵活：React 可以与已知的框架很好的配合。
JSX ：是一个 JavaScript 的语法扩展。官网建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。
单项数据流：数据单向的流向内部组组件；优点：子组件不能修改父组件的数据，更好的维护组件数据。

安装脚手架创建项目

// 全局安装脚手架 create-react-app
npm install -g create-react-app
// 使用 npx 创建项目
npx create-react-app
// 使用脚手架创建项目
create-react-app react-demo

// 目录结构
├── README.md           # 使用方法的文档 
├── node_modules        # 所有的依赖安装的目录 
├── package-lock.json   # 锁定安装时的包的版本号,保证团队的依赖能保证一致。 
├── package.json 
├── public              # 静态公共目录 
└── src                 # 开发用的源代码目录

常见问题（npm 安装失败）：

切换 npm 为淘宝镜像。
使用yarn，如果本来使用 yarn 失败，就把 yarn 的源切换到国内。
如果还不能解决，就删除 node_modules 及 package-lock.json 然后重新执行 npm install 命令。
如果还不能解决，就删除 node_modules 及 package-lock.json 的同时清除 npm 缓存 npm cache clean --force ，之后再执行 npm install 命令。

1. react 编写 hello world

将 src 目录下的文件全部删除，新建 index.js 文件，运行代码，第一个 hello world 程序就完成了。

2. 类组件和函数组件

类组件

import React from 'react'

class App extends React.Component {
    render(){
        return <h1>这是一个App类组件</h1>
    }
}

default export App

函数组件

import React from 'react'

const App = (props) => (<h1>这是一个App函数组件</h1>) // 箭头函数写法

// 普通函数写法
function Apps(){
    return (<h1>这是一个Apps函数组件</h1>)
}

default export App

3. 组件样式

行内样式想要给虚拟 DOM 添加行内样式，需要使用表达式传入样式对象的方式来实现。而这个样式对象的位置可以放在很多地方，例如 render 函数里、组件原型上、外链js文件中。

<div style={{color:'red'}}>App组件</div>

使用 class react 更推荐我们写行内样式，因为 react 认为每一个组件都是一个独立的整体；但是在实际应用中还是是大量的为元素添加类名，但是需要注意的是： class 需要写成 className （因为毕竟是在写类js代码，会收到js规则的现在，而 class 是关键字）

// app.js 代码
<p className='p'>段落内容</p>

// app.css 代码
p{
    color: blueviolet;
    font-size: xx-large;
    font-family: 'LiSu';
}

4. 事件处理

绑定事件

采用 on+事件名的方式来绑定一个事件。注意：这里和原生的事件是有区别的，原生的事件全是小写 onclick , React里的事件是驼峰 onClick ；React的事件并不是原生事件，而是合成事件。

事件handler的写法

直接在render里写行内的箭头函数(不推荐)
在组件内使用箭头函数定义一个方法(推荐)
直接在组件内定义一个非箭头函数的方法，在render里直接使用 onClick={handleClick.bind(this)} (不推荐)
直接在组件内定义一个非箭头函数的方法，在constructor里bind(this)(推荐)

Event 对象

和普通浏览器一样，事件 handler 会被自动传入一个 event 对象，这个对象和普通的浏览器 event 对象所包含的方法和属性都基本一致。不同的是 React中的 event 对象并不是浏览器提供的，而是它自己内部所构建的。它同样具有 event.stopPropagation 、 event.preventDefault 这种常用的方法。

5. ref的应用

什么是 ref

React 提供的这个 ref 属性，表示为对组件真正实例的引用，其实就是 ReactDOM.render() 返回的组件实例；需要区分一下，ReactDOM.render() 渲染组件时返回的是组件实例；而渲染 dom 元素时，返回是具体的 dom 节点。
ref 设置为回调函数

import React, { Component } from 'react';

class Ref extends Component {
    handleClick = () => {
        console.log('ref设置为回调函数', this.input.value) // 点击按钮 打印输入框的值
    }
    render() {
        return (
            <div>
                <input ref={e => this.input = e}/>
                <button onClick={this.handleClick}>按钮</button>
            </div>
        );
    }
}
export default Ref;

ref 设置为字符串

import React, { Component } from 'react';

class Ref extends Component {
    handleClick = (e) => {
        console.log('ref设置为字符串', this.refs.input1.value) // 点击按钮 打印输入框的值
    }
    render() {
        return (
            <div>
                <input ref='input1'/>
                <button onClick={this.handleClick}>点击</button>
            </div>
        );
    }
}
export default Ref;

使用 createRef() 创建 ref

import React, { Component } from 'react';

class Ref extends Component {
    inputRef = React.createRef() // 创建一个 inputRef
    handleClick = (e) => {
        console.log('通过createRef()创建ref',this.inputRef.current.value) // 点击按钮 打印输入框的值
    }
    render() {
        return (
            <div>
                <input ref={this.inputRef}/>
                <button onClick={this.handleClick}>按钮</button>
            </div>
        );
    }
}
export default Ref;

@Title: React 基础笔记 01
@Content: React
@Autor: ling.wang
@StudyDate: 2022-04-02
@WritingDate: 2022-04-02

React 基础笔记 01

React 基础笔记 01

React 介绍

安装脚手架 创建项目

安装脚手架创建项目