React学习笔记（1）

柔情只为你懂 2021-10-24 00:18 385阅读 0赞

因为实习公司技术栈主要是React， 我只好从Vue 转向学习React了， 先深入了解和学习React吧，Vue暂时放一边了~

简单了解下React

2013 年 react单向数据流

内存的改变影响页面改变，不管页面的改变，影响内存的改变。

### React 与 vue的区别： ###

1. 自己处理页面的改变，影响内存，通过事件，调用函数，通知根据内存对象改变页面

2. 没有指令。

### Import 和 require ###

import属于加载前置的机制，因此将其全放在代码顶部，代码解析逐个Import获取一个引入的列表，先引入依赖，再向下执行代码。 加载前置

require

if(true) \{ let querystring = require('querstring'); \}

加载滞后，代码执行到哪一行才进行加载。

### 1.React介绍 ###

React是一个用于构建用户界面的JAVASCRIPT库，

React主要用于构建UI，很多人认为React是MVC中的V（视图）。

React起源于Facebook 的 内部项目， 用来架设Instagram的网站， 并于2013年5月开源。

React拥有较高的性能。

React特点

1. 声明式设计\- React 采用声明范式，可以轻松描述应用。

2. 高效， \- React通过对DOM的模拟，最大限度减少与DOM的交互。

3. 灵活\- React可以与已知的库或框架很好地配合。

4. JSX \- JSX是JavaScript语法的扩展， React开发不一定使用JSX， 但是建议使用它。

5. 组件 \- 通过React构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

6. **单向响应的数据流**。 - React 实现了单向响应的数据流，从而减少了重复代码， 这也是它为什么比传统数据绑定更简单。

### 2. React的安装 ###

脚手架：

内部如果依赖yarn工具（类似于npm的工具）

npm i -g yarn

下载 npm i -g create-react-app

使用 create-react-app 项目名 options 构建项目解构 create-react-app 02\_class\_test

cd 项目目录 && npm i 安装依赖包

运行

1. npm run start 启动；

2. npm run build 生成dist；

React 安装的基本命令

$ cnpm install -g create-react-app

$ create-react-app my-app

$ cd my-app/

$ npm start

jsx语法：

js + xml

### 基本操作总结： ###

1. 引入React对象；

2. 引入ReactDOM对象；

3. 操作jsx；

jsx不能用 += 来运算（不是字符串）；

jsx可以通过数组来输出数据<div>1</div>, <div>2</div>

const arr = \[<div></div>,<div></div>\]

4. 渲染到指定的元素上

reactDOM.render(<arr/>, document.getElementById('app'));

5. 启动npm run dev

React库

react.min.js - React的核心库

react-dom.min.js - 提供与DOM相关的功能

babel.min.js - Babel可以将ES6代码转为ES5，这样我们就能在目前不支持ES6浏览器上执行React代码。 Babel内嵌了JSX的支持。 通过将Babel 和 babel-sublime包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。

React 声明一个变量：

const div = document.getElementById('div');

ReactDOM.render(...) 是渲染方法，所有的 js,html 都可通过它进行渲染绘制，他有两个参数，内容和渲染目标 js 对象。

内容就是要在渲染目标中显示的东西，可以是一个React 部件，也可以是一段HTML或TEXT文本。渲染目标JS对象，就是一个DIV或TABEL,或TD 等HTML的节点对象。

unmountComponentAtNode() 这个方法是解除渲染挂载，作用和 render 刚好相反，也就清空一个渲染目标中的 React 部件或 html 内容。

### 3. React组件 ###

const element = <HelloMessage />为用户自定义的组件。

注意，原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头，比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错。

react组件的例子：

function React(props) {
    	return <h1>Hello World!</h1>;
    }
    
    const element = <HelloReact />;
    
    ReactDOM.render(
    	element,
    	document.getElementById('root')
    );

（1）可以使用函数定义一个组件：

function HelloReact(props){
        return <h1>Hello world React~</h1>;
    }

(2) 也可以使用ES6 class 来定义一个组件：

class HelloReact extends React.Componet{
        render(){
            return <h1>Hello World React~</h1>;
        }
    }

const element = <HelloReact />;    为用户自定义的组件.

### 4. React State（状态） ###

React 把组件看成是一个状态机， 通过与用户的交互，实现不同状态，然后渲染UI，让用界面和数据保持一致。

React 里面，只需要更新组件的state，然后根据state重新渲染用户界面（不需要操作DOM）。

state 的更新是异步的， 调用setState之后， setState 会把要修改的状态放入一个队列之中，因此组件中的state并不会立即改变。 所以不能依赖当前的state， 计算下一个state， 当真正执行状态修改的时候，依赖的this.state并不能保证是最新的state，因为react会把多次state的修改合并成一次。

setState 的一种形式：  它接收一个函数而不是一个对象，这个函数有两个参数：

1）  第一个参数是当前最新状态的前一个状态；   2）   第二个参数是当前最新的属性props

class App2 extends Component{
        constructor(){
            super();
            this.state = {
                num: 0
            }
            // 初始化函数的指向
            this.handleClick = this.handleClick.bind(this);
        }
        handleClick(e){
            console.log(e.target.value);
            const { num } = this.state;
            this.setState({
                // num: e.target.value
                num: num + 1
            });
            this.setState({
                // num: e.target.value
                num: num + 1
            });
            this.setState({
                // num: e.target.value
                num: num + 1
            });
        }
        render(){
            return (
                <div>
                    <span>nun is:{this.state.num}</span>
                    <hr/>
                    <button onClick={this.handleClick}>点击我</button>
                </div>
            );
        }
    }
    
    export default App2;
    
    
    //在index.js中
    import React from 'react';
    import ReactDOM from 'react-dom';
    
    import App2 from './App2.js';
    
    ReactDOM.render(<App2 />, document.getElementById('root'));

![20190818212548554.png][]

每点击一次是 + 1  而不是  + 3 ！

实现+3 更改代码如下:

handleClick(e){
            console.log(e.target.value);
            // const { num } = this.state;
            this.setState( prev => ({      
                num: prev.num + 1
            }));
            this.setState( prev => ({      
                num: prev.num + 1
            }));
            this.setState( prev => ({      
                num: prev.num + 1
            }));
        }

这样子点一次就是 +3，点击按钮两次就是 +6

![2019081821283924.png][]

![20190818212844934.png][]

### 5. React Props ###

state 和 props 主要的区别在于**props是不可变的（只可读）**， 而**state是可以根据与用户交互来改变的**，这就是为什么有些容器组件需要定义state来更新和修改数据，而子组件只能通过props来传递数据。

// 父组件
    class App2 extends Component {
        constructor() {
            super();
            // 设置state，添加name , age, hobby 等属性
            this.state = {
                name: 'Lorin',
                age: 21,
                hobby: 'read, write, run and swim'
            }
        }
        render() {
            return (
                <div>
                    <Name name={this.state.name} />
                    <Age age={this.state.age} />
                    <Hobby hobby={this.state.hobby} />
                </div>
            );
        }
    
    }
    //  子组件Name
    class Name extends Component {
        render() {
            return <h1>{this.props.name}</h1>
        }
    }
    //  子组件Age
    class Age extends Component {
        render() {
            return <h2>{this.props.age}</h2>
        }
    }
    //  子组件Hobby
    class Hobby extends Component {
        render() {
            return <h3>{this.props.hobby}</h3>
        }
    }
    
    export default App2;

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvcmluZ3JheQ_size_16_color_FFFFFF_t_70][]

为了保证组件被正确的使用，React提供了可以对props进行验证的功能，  PropTypes...

PropTypes 为组件类自身的属性，提供了很多的验证器，来验证传入的数据是否有效，当传入的数据无效的时候，JavaScript控制就会抛出警告。

总结state 与 props的区别：

1.  state是组件内部的状态（**组件对内的接口**），不能够直接进行修改，必须要通过setState来改变值的状态，从而能够更新组件内部数据，state 是私有的；

2.  props 是指组件间传递的一种方式（**组件对外的接口**），props也可以传递state， 由于react 的数据流**是自上向下的**，所以是从父组件向子组件进行传递； 此外，**组件内部的this.props属性是只读不可修改的**。

state 和 props 是要经常结合使用的，父组件的state可以转化为props来与子组件进行传值，在这情况下，子组件接收的props是只读的，想要改变值，只能通过**父组件的state**对其进行更改。

PS：**没有state的为无状态组件， 多用props 少用state， 多写无状态组件~！**

其他的实例：

实现input， 双向数据绑定

class App2 extends Component{
        constructor(){
            super();
            this.state = {
                num: 2
            }
            // 初始化函数的指向
            this.changeHandler = this.changeHandler.bind(this);
        }
        changeHandler(e){
            console.log(e.target.value);
            console.log(this);    //更为严谨的浏览器this指向
            this.setState({
                num: e.target.value
            });
        }
        render(){
            return (
                <div>
                    <span>{this.state.num}</span>
                    <hr/>
                   <input type="text" value={this.state.num} 
                        onChange={ this.changeHandler } />
                </div>
            );
        }
    }
    
    export default App2;

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvcmluZ3JheQ_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvcmluZ3JheQ_size_16_color_FFFFFF_t_70 2][]

### Visual Studio Code ###

### 使用React进行开发推荐的插件： ###

1. css-auto-prefix

2. colorize

3. vscode-fileheader 添加文件头

4. reactjs code snippets react 开发的一些简写，提高开发效率

5. Path Autocomplete 路径提示功能

6. git blame 安装了git之后， git blame可以基于git去审查每一行代码最近修改的作者。

[20190818212548554.png]: /images/20211023/4741bf30a5004e4b84f99cfd8cefbadf.png
[2019081821283924.png]: /images/20211023/0e0a492a4a814e96b5f6abc2016c67cb.png
[20190818212844934.png]: /images/20211023/a437b06aa08544e6b76a475456102d60.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvcmluZ3JheQ_size_16_color_FFFFFF_t_70]: /images/20211023/18b892cd332c4fc19b783684d3b27519.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvcmluZ3JheQ_size_16_color_FFFFFF_t_70 1]: /images/20211023/77e0be10579445df808403185969986a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvcmluZ3JheQ_size_16_color_FFFFFF_t_70 2]: /images/20211023/f280e7054c0c4c369d3742850b91c540.png