React学习笔记（1）

最新推荐文章于 2024-08-24 10:14:34 发布

loringray

最新推荐文章于 2024-08-24 10:14:34 发布

阅读量283

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/loringray/article/details/99699975

前端同时被 2 个专栏收录

27 篇文章

订阅专栏

React

6 篇文章

订阅专栏

因为实习公司技术栈主要是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'));

每点击一次是 + 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

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;

为了保证组件被正确的使用，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;