XJIAL88
XJIAL88

react知识点整理

REACT基础知识一：

REACT是FACE-BOOK公司开发的一款MVC版JS框架
MVC：Model（数据层）、VIEW（视图层）、CONTROLLER（控制层）
核心思想：通过数据的改变来影响视图的渲染（数据驱动）

基于脚手架 CREATE-REACT-APP 快速构建一个REACT工程项目结构

  • 自动安装REACT的核心组件：REACT/REACT-DOM
  • 自动安装WEBPACK，并且完成相关的配置：
    - 区分了开发环境和生产环境
    - 安装BABEL以及对应的语言解析包，可以把REACT和ES6进行编译处理
    - 安装CSS/STYLE/FILE等加载器，处理CSS等合并压缩的问题
    - 安装了ES-LINT，可以进行代码检测
    - 安装了很多的插件，可以实现JS和CSS以及HTML的分离，打包，压缩等
    - 安装了WEBPACK-DEV-SERVER，可以在开发环境下，编译后自动创建服务，打开浏览器，当代码修改后，自动保存编译，页面自动刷新渲染等
使用脚手架

把脚手架安装到全局环境下，以后应用命令操作，完成项目结构的搭建

  • $ npm install create-react-app -g

创建项目结构目录

  • 项目名遵循NPM发包命名规范：名字只能是/^[a-z0-9_-]$/
  • $ create-react-app 项目名

特点：如果当前电脑安装了YARN，创建工程目录的时候，走的是YARN安装，YARN和NPM主体相同，但是处理起来还有一定的区别，所以我们以后继续向工程中安装模块以及执行配置脚本打包编译的时候，尽可能使用YARN，不建议和NPM混用

工程化目录
|- node_modules
|    |- .bin  所有在本地可执行的命令脚本(react-scripts.cmd)
|    |- ...
|
|- package.json 当前项目的配置清单
|
|- public 存放的是当前项目的HTML页面（有可能放一部分静态资源）
|    |- index.html
|    |- ...
|
|- src 存放的是项目需要的所有JS或者静态资源等（包括组件、STORE、路由、数据模型、AJAX请求等等内容 “我们开发的内容基本上所有东西都在SRC中写”）
|    |- index.js 当前项目的入口文件
|    |- ...
暴露WEBPACK配置项

脚手架构建项目的时候，为了结构的美化，把所有的WEBPACK配置等都隐藏到了NODE_MODULES中（REACT-SCRIPTS中），真实项目中，我们经常会基于脚手架构建的结构自己在安装配置一些信息（例如：LESS处理的配置），此时我们需要把配置项暴露出来

如果当前的项目基于git管理，在执行eject的时候，如果还有没有提交到历史区的内容，需要先提交到历史区，然后在eject才可以，否则报错：This git repository has untracked files or uncommitted changes …

$ yarn eject 此操作是不可逆转的（而且操作之前需要把所有修改的文件提交到GIT仓库中）

|- config
|    |- webpack.config.dev.js  开发环境下的WP配置
|    |- webpack.config.prod.js 生产环境下的WP配置
|    |- paths.js  基本配置项（包含项目的入口信息）
|    |- ...
|
|- scripts
|    |- start.js / build.js / test.js  当我们执行yarn start/build/test的时候，执行的就是这三个JS文件
可执行的本地脚本命令
  • $ yarn start
    - 创建一个端口号为3000，协议为HTTP的WEB服务
    - 按照webpack.config.dev.js把项目编译
    - 打开浏览器，预览我们正在开发的项目
    - 当项目文件修改的时候，自动重新编译，浏览器页面自动刷新，展示最新的效果
[WINDOWS]
$ set HTTPS = true && yarn start
$ set PORT = 1234 && yarn start

[MAC/LINUX]
$ HTTPS = true yarn start
$ PORT = 1234 yarn start

  • $ yarn build
    - 生成一个build文件夹，存放最后打包的文件
    - 基于webpack.config.prod.js，把项目进行编译打包
    - 部署上线的时候，只需要把buid中的内容发布即可

基于脚手架配置LESS

安装LESS和对应的加载器

 $ yarn add less less-loader
修改开发和生产环境下的WEBPACK配置项
[DEV:159~193行]
{
   test: /\.(css|less)$/,
   use: [
       require.resolve('style-loader'),
       {
           loader: require.resolve('css-loader'),
           ...
       },
       ...
       {
           loader: require.resolve('less-loader')
       },
   ],
},

[PROD:169~212行]
{
   test: /\.(css|less)$/,
   loader: ExtractTextPlugin.extract(
       Object.assign(
           {
               fallback: {
                   loader: require.resolve('style-loader'),
                   options: {
                       hmr: false,
                   },
               },
               use: [
                   {
                       loader: require.resolve('css-loader'),
                      ...
                   },
                   ...
                   {
                       loader: require.resolve('less-loader'),
                   }
               ],
           },
           extractTextPluginOptions
       )
   ),
},

REACT基础知识二

REACT是基于独有的JSX语法实现视图（数据和HTML）渲染的

JSX语法
A：JSX语法的渲染使用的是ReactDOM.render
ReactDOM.render([JSX元素],[指定的容器],[回调函数：当我们把JSX放到指定容器内，触发执行的函数]);
B：JSX = JAVASCRIPT + XML（HTML）
1. 不推荐存放JSX的容器是BODY（写BODY会报错），一般都是使用我么自己创建的一个元素（例如：创建#ROOT的DIV容器等）
ReactDOM.render(
珠峰培训
, root);

2. 不允许出现两个“根”元素，如果需要绑定复杂的结构，最外层嵌套一个容器做为根元素即可
ReactDOM.render(
珠峰培训
哈哈
, root); =>错误的
ReactDOM.render(

    
珠峰培训

    
哈哈


, root); =>正确的

3. 把数据嵌入到JSX中（不是嵌入到元素的属性中，而是正常的内容中）
 => 可以嵌入变量或者直接的数据值
 let name='xxx';
 ReactDOM.render(

     
{name}

     
{'哈哈'}

 
, root);

 => 不能嵌入对象（代指：{}、/^$/、日期对象、函数、或者数组中的某一项是前面的也不行 [一维简单的数据是可以的]）
 ReactDOM.render(

     
{{name:'xxx'}}
     NO
     
{new Date()}
       NO
     
{[12,23,34]}
       OK
     
{(() => {
         return '呵呵';          OK:把自执行函数的结果嵌入进来
     })()}

 
, root);

 => 可以嵌入基本类型值（null/undefined/布尔值都是空元素，也就是不显示任何的内容）

 => 大括号中可以嵌入JS表达式（执行JS代码需要有返回结果的）
 循环创建的JSX元素需要设置标识KEY，并且在当前循环的时候，这个KEY需要唯一；而使用MAP是因为它有返回值，返回的是替换后的数组；
 ReactDOM.render(
    
     {
         data.map((item, index) => {
             return 
  • 
                 {item.id}  {item.title}
             
    • ;
         })
     }
 
, root);

 使用三元运算符解决判断操作，（IF和SWITCH都不可以）
 ReactDOM.render(
    
     {name ? '哈哈' : '呵呵'}
 
, root);

4. 可以给JSX元素设置属性
 =>属性值对应大括号中 对象、函数 都可以放（也可以放JS表达式）
 =>STYLE属性值必须是对象（不能是字符串）
 =>CLASS 用 CLASS-NAME 代替
 =>...

REACT基础知识三：

1.JSX语法：JSX元素\REACT元素\虚拟DOM

REACT是如何把JSX元素转换为真实的DOM元素并且添加到页面中？

1. 基于BABEL/BABEL-LOADER/BABEL-PRESET-REACT-APP：把JSX语法编译为REACT.CREATE-ELEMENT这种模式
=>CREATE-ELEMENT中至少两个参数，没有上限
  第一个：目前是当前元素标签的标签名（字符串）
  第二个：属性（没有给元素设置属性则为NULL）
  其它的：当前元素的所有子元素内容（只要子元素是HTML，就会变为新的CREATE-ELEMENT）

2. 执行CREATE-ELEMENT，把传递进来的参数最后处理成为一个对象
{
  type:'标签名',
  props:{
     自己设置的那些属性对象（但是对于KEY和REF来说是要提取出来的）,
     children：存放自己子元素的（没有子元素就没有这个属性），如果有多个子元素，就以数组的形式存储信息
  },
  ref:null,
  key:null
}

3. 把生成的对象交给RENDER进行处理：把对象编程DOM元素，插入到指定的容器中
两种声明组件方式

真实项目中使用REACT都是基于组件或者模块开发的

  1. 函数式创建组件
  2. 基于类创建组件

调取组件的时候：BABEL解析，传递给CREATE-ELEMENT的第一个参数TYPE不在是字符串标签名，而是一个函数（类），生成的对象中，TYPE也是一个函数；当RENDER渲染的时候会根据TYPE类型做不同的事情（如果是字符串就是创建新元素，如果是函数，就会把函数执行，把返回的JSX对象创建成为新的元素进行渲染），函数执行的时候会把解析出来的对象中的PROPS做为参数传递给组件（函数）

函数式组件声明的特点：

  1. 会把基于CREATE-ELEMENT解析出来的对象中的PROPS做为参数传递给组件（可以完成：多次调取组件传递不同的信息）
  2. 一旦组件调取成功，返回的JSX就会渲染到页面上，但是后期不通过重新调取组件或者获取DOM元素操作操作的方式，很难再把渲染好组件中的内容更改 =>函数是组件声明是“静态组件”
声明函数式组件

Vote.js

import React from 'react';

//=>函数式组件声明：创建一个函数，里面返回一个JSX

export default function Vote(props) {
    //=>PROPS:调取组件的时候传递进来的属性信息（可能包含：className/style/id...还有可能有children等）
    return 

        

            

                {props.title}
            

        

        

            支持人数：0
            

            反对人数：0
            

            支持比率：0%
            

            

            {/!*存放自己调取组件时候，额外扩展的标记*!/}
            {props.children}
            {/!*{
                React.Children.map(props.children, item => {
                    return item;
                })
            }*!/}
        

        

            
              
            
        

    
;
}
引用组件

函数式调取组件 index.js

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

import 'bootstrap/dist/css/bootstrap.css';
import Vote from './component/Vote';

/*
 * 真实项目中使用REACT都是基于组件或者模块开发的
 *   1. 函数式创建组件
 *   2. 基于类创建组件
 *
 * 调取组件的时候：BABEL解析，传递给CREATE-ELEMENT的第一个参数TYPE不在是字符串标签名，而是一个函数（类），生成的对象中，TYPE也是一个函数；当RENDER渲染的时候会根据TYPE类型做不同的事情（如果是字符串就是创建新元素，如果是函数，就会把函数执行，把返回的JSX对象创建成为新的元素进行渲染），函数执行的时候会把解析出来的对象中的PROPS做为参数传递给组件（函数）
 *
 * 函数式组件声明的特点：
 *   1. 会把基于CREATE-ELEMENT解析出来的对象中的PROPS做为参数传递给组件（可以完成：多次调取组件传递不同的信息）
 *   2. 一旦组件调取成功，返回的JSX就会渲染到页面上，但是后期不通过重新调取组件或者获取DOM元素操作操作的方式，很难再把渲染好组件中的内容更改 =>函数是组件声明是“静态组件”
 */
ReactDOM.render(

    

    
        {/*双闭合调取组件，就是为了传递子元素的*/}
        
投票说明：上善若水。水善利万物而不争，处众人之所恶，故几于道。居，善地；心，善渊；与，善仁；言，善信；政，善治；事，善能；动，善时。夫唯不争，故无尤。

    

, root);
类创建组件（基于继承COMPONENT类实现的）

React中的受控组件和非受控组件的概念:

  1. 基于数据驱动（修改状态数据，react帮助我们重新渲染视图）完成的组件叫做“受控组件”（受数据控制的组件）
  2. 基于 ref 操作 DOM实现视图更新的，叫做“非受控组件”

数据驱动思想

import React from 'react';

// 1. 调取组件相当于创建类的实例(THIS)，把一些私有的属性挂载到实例上了，这样组件内容所有方法中都可以基于实例获取这些值（包括：传递的属性和自己管理的状态）
// 2. 有自己的状态管理，当状态改变的时候，REACT会重新渲染视图（差异更新：基于DOM-DIFF只把需要重新渲染的部分渲染即可）
export default class Vote extends React.Component {
    constructor(props) {
        super(props); //=>React.Component.call(this) 可以把componengt中的私有属性继承过来 this.props / this.state（this.setState） / this.contect / this.refs / this.updater

        //=>初始化状态
        this.state = {
            n: 0,
            m: 0
        };
    }

    render() {
        let {title, children} = this.props,
            {n, m} = this.state,
            rate = (n / (n + m)) * 100;
        isNaN(rate) ? rate = 0 : null;

        return 

            

                

                    {title}
                

            

            

                支持人数：{n}
                

                反对人数：{m}
                

                支持比率：{rate.toFixed(2) + '%'}
                

                

                {children}
            

            

                
                  
                
            

        
;
    }

    support = ev => {
        //=>使用箭头函数是为了保证方法中的THIS永远是实例本身（无论在哪执行这个方法）
        //=>EV.TARGET:获取当前操作的事件源(DOM元素)
        this.setState({
            //=>修改状态信息并且通知RENDER重新渲染（异步操作：如果有其它代码执行，先执行其它的代码，然后再去通知状态修改）
            n: this.state.n + 1
        }, () => {
            //=>回调函数一般不用：当通知状态更改完成，并且页面重新渲染完成后，执行回调
        });
    };

    against = ev => {
        this.setState({
            m: this.state.m + 1
        });
    };
}

DOM操作思想

import React from 'react';

//=>REF是REACT中提供操作DOM的方案
//1. 给需要操作的元素设置REF（保持唯一性，否则会冲突覆盖）
//2. 在实例上挂载了REFS属性，它是一个对象，存储了所有设置REF的元素（REF值：元素对象）
export default class Vote extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        let {title, children} = this.props;
        return 

            

                

                    {title}
                

            

            

                支持人数：0
                

                反对人数：0
                

                支持比率：0%
                

                

                {children}
            

            

                
                  
                
            

        
;
    }

    support = ev => {
        this.refs.AA.innerHTML++;
        this.computed();
    };

    against = ev => {
        this.refs.BB.innerHTML++;
        this.computed();
    };

    computed = () => {
        let {AA, BB, RATE} = this.refs,
            n = parseFloat(AA.innerHTML),
            m = parseFloat(BB.innerHTML),
            ra = (n / (n + m)) * 100;
        isNaN(ra) ? ra = 0 : null;
        RATE.innerHTML = ra.toFixed(2) + '%';
    };
}
引用组件

函数式调取组件 index.js

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

import 'bootstrap/dist/css/bootstrap.css';
import Vote from './component/Vote';

ReactDOM.render(

    

    
        {/*双闭合调取组件，就是为了传递子元素的*/}
        
投票说明：上善若水。水善利万物而不争，处众人之所恶，故几于道。居，善地；心，善渊；与，善仁；言，善信；政，善治；事，善能；动，善时。夫唯不争，故无尤。

    

, root);
3.生命周期函数

  • 调取组件

    • constructor
    • componentWillMount 第一次渲染之前
    • render 渲染
    • componentDidMount 第一次渲染之后

  • 组件重新渲染：内部状态改变、传递给组件的属性改变

    • 状态改变：
      • shouldComponentUpdate
    • 是否允许组件更新：返回TRUE是允许，返回FALSE则不再继续向下走
      • componentWillUpdate
    • 更新之前：和should一样，方法中通过this.state.xxx获取的还是更新前的状态信息，方法有两个参数：nextProps/nextState存储的是最新的属性和状态信息

  • render 更新步骤

    • componentDidUpdate 更新之后

    • 属性改变：

    • componentWillReceiveProps ( nextProps / nextState )

      • 接收最新属性之前，基于this.props.xxx获取的是原有的属性信息，nextProps存储的是最新传递的属性信息
      • shouldComponentUpdate 是否允许组件更新

    • componentWillUpdate 更新之前

    • render 更新

    • componentDidUpdate 更新之后

  • 组件销毁

    • componentWillUnmount 组件销毁之前

组件的属性是只读的：只能调取组件时候传递进来，不能自己在组件内部修改（但是可以设置默认值和规则）

组件的状态是可读写的：状态改变会引发组件的重新更新（状态是基于setState改变）

组件实例上可以放一些信息：这些信息只是为了方便在组件内任意方法中获取和使用的

实例上挂载的REFS：就是用来操作DOM的

实例上挂载的context：是用来实现组件之间信息传递的

复合组件信息传递

1. 复合组件：父组件嵌套子组件

传递信息的方式

A：父组件需要把信息传递给子组件

“属性传递”：调取子组件的时候，把信息基于属性的方式传递给子组件（子组件PROPS中存储传递的信息）;这种方式只能父组件把信息传递子组件，子组件无法直接的把信息传递给父组件，也就是属性传递信息是单向传递的；

export default class Vote extends React.Component {
    render() {
        let {title, count} = this.props;
        return 

            
            ...
        
;
    }
}

“上下文传递”：父组件先把需要给后代元素（包括孙子元素）使用的信息都设置好（设置在上下文中），后代组件需要用到父组件中的信息，主动去父组件中调取使用即可

//=>父组件设置信息
import React from 'react';
import PropTypes from 'prop-types';

import VoteHead from "./VoteHead";
import VoteBody from "./VoteBody";
import VoteFooter from "./VoteFooter";

export default class Vote extends React.Component {
    //=>设置默认属性
    static defaultProps = {
        title: '标题不知道，随便投吧',
        count: {
            n: 0,
            m: 0
        }
    };

    /*
     * 在父组件中
     *   需要安装:prop-types $ yarn add prop-types
     *
     *   1. 设置子组件上下文属性值类型
     *      static childContextTypes = {};
     *
     *   2. 获取子组件的上下文（设置子组件的上下文属性信息）
     *      getChildContext(){return {}}
     */
     
    static childContextTypes = {
        //=>设置子组件上下文属性值类型
        n: PropTypes.number,
        m: PropTypes.number
    };

    getChildContext() {
        //->RETURN的是啥，相当于给子组件上下文设置成为啥
        let {count: {n = 0, m = 0}} = this.props;
        return {
            n,
            m
        };
    }

    constructor(props) {
        super(props);
    }

    render() {
        let {title} = this.props;

        return 

            
            
            
        
;
    }
}

/*========================*/
//=>子组件主动获取需要的信息
import React from 'react';
import PropTypes from 'prop-types';

export default class VoteBody extends React.Component {

    /*
     * 3. 子组件中设置使用传递进来的上下文类型：设置哪个的类型，子组件上下文才有那个属性，不设置的是不允许使用的
     * 指定上下文属性类型需要和父组件中指定的类型保持一致，否则报错
     * 使用：this.content.xxx
     */

    static contextTypes = {
     //=>首先类型需要和设置时候类型一样，否则报错；并且你需要用啥，就写啥即可；
        n: PropTypes.number,
        m: PropTypes.number
    };

    constructor(props, context) {
        super(props, context);
    }

    render() {
        let {n, m} = this.context,
            rate = (n / (n + m)) * 100;
        isNaN(rate) ? rate = 0 : null;

        return 

            支持人数：{n}
            

            反对人数：{m}
            

            支持比率：{rate.toFixed(2) + '%'}
        
;
    }
}

属性 VS 上下文

  1. 属性操作起来简单，子组件是被动接收传递的值（组件内的属性是只读的），只能父传子（子传父不行，父传孙也需要处理：父传子，子再传孙）；
  2. 上下文操作起来相对复杂一些，子组件是主动获取信息使用的（子组件是可以修改获取到的上下文信息的，但是不会影响到父组件中的信息，其它组件不受影响）,一旦父组件设置了上下文信息，它后代组件都可以直接拿来用，不需要一层层的传递；

B：其实子组件也能修改父组件中的信息（子传父）

利用回调函数机制：父组件把一个函数通过属性或者上下文的方式传递给子组件，子组件中只要把这个方法执行即可（也就是子组件中执行了父组件方法，还可以传递一些值过去），这样父组件在这个方法中，想把自己的信息改成啥就改成啥

父组件通过属性传递回调函数修改父组件

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css'; 

/*HEAD*/
class Head extends React.Component {
    render() {
        return 

            

                {/*子组件通过属性获取父组件传递的内容*/}
                点击次数：{this.props.count}
            

        
;
    }
}

/*BODY*/
class Body extends React.Component {
    render() {
        return 

            
        
;
    }
}

/*PANEL*/
class Panel extends React.Component {
    constructor() {
        super();
        this.state = {n: 0};
    }

    fn = () => {
        //=>修改PANEL的状态信息
        this.setState({
            n: this.state.n + 1
        });
    };

    render() {
        return 

            {/*父组件中在调取子组件的时候，把信息通过属性传递给子组件*/}
            

            {/*父组件把自己的一个方法基于属性传递给子组件，目的是在子组件中执行这个方法*/}
            
        
;
    }
}

ReactDOM.render(, root);

父组件设置上下文传递回调函数

import React from 'react';
import PropTypes from 'prop-types';

import VoteHead from "./VoteHead";
import VoteBody from "./VoteBody";
import VoteFooter from "./VoteFooter";

export default class Vote extends React.Component {
    //=>PROPS
    static defaultProps = {
        title: '标题不知道，随便投吧',
        count: {
            n: 0,
            m: 0
        }
    };

    //=>CONTEXT
    static childContextTypes = {
        n: PropTypes.number,
        m: PropTypes.number,
        callBack: PropTypes.func  //=>设置回调函数
    };

    getChildContext() {
        //=>只要RENDER重新渲染，就会执行这个方法，重新更新父组件中的上下文信息；如果父组件上下文信息更改了，子组件在重新调取的时候，会使用最新的上下文信息；（RENDER=>CONTEXT=>子组件调取渲染）
        let {n, m} = this.state;
        return {
            n,
            m,
            callBack: this.updateContext
        };
    }

    updateContext = type => {
        //=>TYPE:'SUPPORT'/'AGAINST'
        if (type === 'support') {
            this.setState({n: this.state.n + 1});
            return;
        }
        this.setState({m: this.state.m + 1});
    };

    constructor(props) {
        super(props);

        //=>INIT STATE
        let {count: {n = 0, m = 0}} = this.props;
        this.state = {n, m};
    }

    render() {
        let {title} = this.props;

        return 

            
            
            
        
;
    }
}

/*=====================*/
//=>子组件通过把传递进来的回调执行达到修改父组件信息

import React from 'react';
import PropTypes from "prop-types";

export default class VoteFooter extends React.Component {
    static contextTypes = {
        callBack: PropTypes.func
    };

    constructor(props, context) {
        super(props, context);
    }

    render() {
        let {callBack} = this.context;

        return 

            
              
            
        
;
    }
}
2. 平行组件：兄弟组件或者毫无关系的两个组件

方案一：让两个平行组件拥一个共同的父组件
父：Parent
子：A / B
父组件中有一些信息，父组件把一个方法传递给A，A中把方法执行（方法执行修改父组件信息值），父组件再把最新的信息传递给B即可，等价于A操作，影响了B

方案二：基于REDUX来进行状态管理，实现组件之间的信息传输（常用方案）
REDUX可以应用在任何的项目中（VUE/JQ/RERACT的都可以），REACT-REDUX才是专门给REACT项目提供的方案

Redux状态管理

redux基础流程

index.js（创建store容器）

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css';
import Vote from './component/Vote/Vote';

/*
 * 创建容器：需要把REDUCER传递进来
 *   REDUCER作用：
 *     1.记录了所有状态修改的信息（根据行为标识走不同的修改任务）
 *     2.修改容器中的状态信息
 *
 *   [参数]
 *     state：容器中原有的状态信息(如果第一次使用，没有原有状态，给一个初始默认值)
 *     action：dispatch任务派发的时候传递的行为对象(这个对象中必有一个TYPE属性，是操作的行为标识，REDUCER就是根据这个行为标识来识别该如何修改状态信息)
 */
import {createStore} from 'redux';

let reducer = (state = {n: 0, m: 0}, action) => {
    switch (action.type) {
        case 'VOTE_SUPPORT':
            state = {...state, n: state.n + 1};
            break;
        case 'VOTE_AGAINST':
            state = {...state, m: state.m + 1};
            break;
    }
    return state;//=>只有把最新的STATE返回，原有的状态才会被修改
};
let store = createStore(reducer);
/*
 * 创建的STORE中提供三个方法：
 *   dispatch：派发行为(传递一个对象，对象中有一个TYPE属性)，通知REDUCER修改状态信息
 *   subscribe：事件池追加方法
 *   getState：获取最新管理的状态信息
 */

//=>RENDER
ReactDOM.render(

    

, root);

安装redux

$ yarn add redux react-redux

React工程化目录结构

src
 |- index.js 主入口文件
 |- component 组件
 |   |- Vote 组件文件夹
 |   |- Vote.js
 |   |- VoteHead.js
 |   |- VoteBody.js
 |   |- VoteFooter.js
 |- store 状态管理文件夹
 |    |-reducer 存放每一个模块的 reducer
 |    |   |- vote.js
 |    |   |- personal.js
 |    |   |- ...
 |    |   |- index.js 把每一个模块的reducer最后合并成一个reducer
 |    |-action 存放每一个模块需要进行的派发任务（ActionCreator）
 |    |   |- vote.js
 |    |   |- personal.js
 |    |   |- ...
 |    |   |- index.js 所有模块的Action进行合并
 |    |-action-types.js 所有派发任务的行为标识都在这里进行宏观管理
 |    |-index.js 创建store

Redux：进行状态统一管理的类库（适用于任何技术体系的项目）

  1. 只要两个或者多个组件之间想要实现信息的共享，都可以基于redux共享，都可以基于redux解决，把共享的信息存储到redux容器中进行管理。
  2. 可以使用redux做临时存储，页面加载的时候，把从服务器获取的数据存储到redux中，组件渲染需要的数据，从redux中获取，这样只要页面不刷新，路由切换的时候，再次渲染组件不需要重新从服务器拉取数据，直接从redux中获取即可；页面刷新，从头开始！（这套方案代替了localStorage本地存储来实现数据缓存）

index.js（创建createStore）

import {createStore} from 'redux';
import reducer from './reducer';//<=>'./reducer/index'

let store = createStore(reducer);
export default store;

action-types.js（管控redux任务派发行为标识）

/*
 * 管控当前项目中所有REDUX任务派发中需要的行为标识 ACTION-TYPE
 */
//=>VOTE
export const VOTE_SUPPORT = 'VOTE_SUPPORT';
export const VOTE_AGAINST = 'VOTE_AGAINST';

//=>PERSONAL
export const PERSONAL_INIT = 'PERSONAL_INIT';

reducer文件夹

vote.js

/*
 * VOTE版块的REDUCER
 *    STATE：原始REDUX管理的状态信息（设置初始值）
 *    ACTION：DISPATCH派发的时候传递的行为对象 {TYPE,...}
 *
 * import * as TYPE from '../action-types' 把模块中所有导出的内容全部导入并重新命名为TYPE,此后TYPE对象中包含了所有导出的信息(ES6 Module)
 */
import * as TYPE from '../action-types';

export default function vote(state = {
    n: 0,
    m: 0
}, action) {
    switch (action.type) {
        case TYPE.VOTE_SUPPORT:
            state = {...state, n: state.n + 1};
            break;
        case TYPE.VOTE_AGAINST:
            state = {...state, m: state.m + 1};
            break;
    }
    return state;
};

personal.js

import * as TYPE from '../action-types';

export default function personal(state = {
    baseInfo: {}
}, action) {
    //...
    return state;
};

index.js（合并成为总的REDUCER）

/*
 * 把每一个模块单独设定的REDUCER函数最后合并成为总的REDUCER
 *
 *   为了保证合并REDUCER过程中，每个模块管理的状态信息不会相互冲突，REDUX在合并的时候把容器中的状态进行分开管理（以合并REDUCER时候设置的属性名做为状态划分的属性名，把各个板块管理的状态放到自己的属性下即可）
 *   STATE={
 *      vote:{
 *         n:0,
 *         m:0
 *      },
 *      personal:{
 *         baseInfo:{}
 *      }
 *   }
 *
 *   以后获取状态信息的时候，也需要把VOTE等板块名加上了
 *   STORE.GET-STATE().VOTE.N
 */
import {combineReducers} from 'redux';
import vote from './vote';
import personal from './personal';

let reducer = combineReducers({
    vote,
    personal
});
export default reducer;

action文件夹

Vote.js

/*
 * 每个板块单独的ACTION-CREATOR：就是把DISPATCH派发时候需要传递的ACTION对象进一步统一封装处理（REACT-REDUX中我们会体验到它的好处的）
 */
import * as TYPE from '../action-types';

let vote = {
    support() {
        //=>DISPATCH派发的时候需要传递啥就返回啥即可
        return {
            type: TYPE.VOTE_SUPPORT
        };
    },
    against() {
        return {
            type: TYPE.VOTE_AGAINST
        };
    }
};
export default vote;

personal.js

import * as TYPE from '../action-types';

let personal = {};
export default personal;

index.js（合并）

/*
 * 合并所有的ACTION-CREATOR，类似于REDUCER合并，为了防止冲突，合并后的对象是以板块名称单独划分管理
 *   ACTION={
 *      vote:{
 *         xxx(){}
 *      },
 *      ...
 *   }
 */
import vote from './vote';
import personal from './personal';

let action = {
    vote,
    personal
};
export default action;

主入口文件index.js使用（把store当做组件属性传过去）

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css';
import Vote from './component/Vote/Vote';
import store from './store';

//=>RENDER
ReactDOM.render(

    

, root);

component文件夹

vote.js

import React from 'react';
import PropTypes from 'prop-types';
import VoteHead from "./VoteHead";
import VoteBody from "./VoteBody";
import VoteFooter from "./VoteFooter";

export default class Vote extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        let {store} = this.props;

        return 

            
            
            
        
;
    }
}

VoteBody.js（通过subscribe监听store状态改变从而执行事件池函数）

import React from 'react';
import PropTypes from 'prop-types';

export default class VoteBody extends React.Component {
    constructor(props) {
        super(props);

        //=>INIT STATE
        let {n, m} = this.props.store.getState().vote;
        this.state = {n, m};
    }

    componentDidMount() {
        this.props.store.subscribe(() => {
            let {n, m} = this.props.store.getState().vote;
            this.setState({n, m});
        });
    }

    render() {
        let {n, m} = this.state,
            rate = (n / (n + m)) * 100;
        isNaN(rate) ? rate = 0 : null;

        return 

            支持人数：{n}
            

            反对人数：{m}
            

            支持比率：{rate.toFixed(2) + '%'}
        
;
    }
}

VoteFooter.js （通过dispatch派发改变reducer管理状态）

import React from 'react';
import PropTypes from "prop-types";
import action from '../../store/action'

export default class VoteFooter extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return 

            
              
            
        
;
    }
}

VoteHead.js

import React from 'react';

export default class VoteHead extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return 

            

                {this.props.title}
            

        
;
    }
}

React-redux 状态管理

React-redux：react-redux是把redux进一步封装，适配react项目，让redux操作更简洁

  • store文件夹中的内容和redux一模一样
  • 在组件调取使用的时候可以优化一些步骤
  1. Provider 根组件
    • 当前整个项目都在Provider组件下
    • 作用就是把创建的store可以供内部任何后组件使用（基于上下文完成的）
    • 步骤：
    • Provider组件中只允许出现一个子元素
    • 把创建的store基于属性传递给Provider（这样后袋组件中都可以使用这个store了）
  2. connect 高阶组件

react-router-dom 实现SPA单页面应用

3 以前的版本成为：react-router
4 往后更新版本为：react-router-dom

$ yarn add react-router-dom

BorwserRouter VS HashRouter

它是两种常用的路由实现思想，BrowserRouter浏览器路由，HashRouter哈希路由

BrowserRouter

它是基于H5中history API （pushState，replaceState，popstate）来保持UI和URL的同步，真实项目中应用的不多，一般只有当前项目是基于服务器端渲染的，我们才会使用浏览器路由
http://www.demo.com/
http://www.demo.com/peraonal/
http://www.demo.com/peraonal/login/

HashRouter

真实项目中（前后端分离的项目：客户端渲染），我们经常使用的是哈希路由来完成的，它依据相同的页面地址，不同的哈希值，来规划当前页面中的哪一个组件呈现渲染，它基于原生JS构造了一套类似于history API机制，每一次路由切换都是基于history stack完成的！

http://www.demo.com/#/
http://www.demo.com/#/peraonal/
http://www.demo.com/#/peraonal/login/

**HashRouter路由基础使用 **

  1. 当前项目一旦使用HASH-ROUTER，则默认在页面的地址后面加上“#/”，也就是HASH默认值是一个斜杠，我们一般让其显示首页组件信息内容
  2. HASH-ROUTER中只能出现一个子元素
  3. HASH-ROUTER机制中，我们需要根据哈希地址不同，展示不同的组件内容，此时需要使用ROUTE

route

path：设置匹配地址，但是默认不是严格匹配，当前页面哈希地址只要包含完整的它（内容是不变的），都能被匹配上

  • path = '/' ：和它匹配的地址只有要斜杠即可（都能和它匹配）
  • path='/user'：“#/user/login”也可以匹配，但是“#/user2”这个无法匹配

conponent：一但哈希值和当前route的path相同了，则渲染COMPONENT指定的组件

exact：让PATH的匹配严谨和严格一些（只有URL哈希值和PATH设定的值相等才可以匹配到）

  • path='/'：“#/”匹配，但是“#/user”就不再匹配了

render：当页面的哈希地址和 path 匹配，会把 render 规划的方法执行，在方法中一般做“权限校验”（渲染组件之前验证是否存在权限，不存在做一些特殊处理）

HashRouter 路由规则

默认情况下，会和每一个 route 都做校验（哪怕之前已经有校验成功的），switch 组件可以解决这个问题，和 switch case 一样，只要有一种情况校验成功，就不在向后校验了

import React from 'react';
import ReactDOM, {render} from 'react-dom';
import {HashRouter, Route, Switch, Redirect} from 'react-router-dom';

import A from './component/A';
import B from './component/B';
import C from './component/C';

/*
 * HashRouter
 *   1. 当前项目一旦使用HASH-ROUTER，则默认在页面的地址后面加上“#/”，也就是HASH默认值是一个斜杠，我们一般让其显示首页组件信息内容
 *
 *   2. HASH-ROUTER中只能出现一个子元素
 *
 *   3. HASH-ROUTER机制中，我们需要根据哈希地址不同，展示不同的组件内容，此时需要使用ROUTE
 *
 * ROUTE
 *   PATH：设置匹配地址，但是默认不是严格匹配，当前页面哈希地址只要包含完整的它（内容是不变的），都能被匹配上
 *     PATH='/' ：和它匹配的地址只有要斜杠即可（都能和它匹配）
 *     PATH='/user'：“#/user/login”也可以匹配，但是“#/user2”这个无法匹配
 *
 *   COMPONENT：一但哈希值和当前ROUTE的PATH相同了，则渲染COMPONENT指定的组件
 *
 *   EXACT：让PATH的匹配严谨和严格一些（只有URL哈希值和PATH设定的值相等才可以匹配到）
 *     PATH='/'：“#/”匹配，但是“#/user”就不再匹配了
 *
 *   STRICT
 *
 *   RENDER：当页面的哈希地址和PATH匹配，会把RENDER规划的方法执行，在方法中一般做“权限校验”（渲染组件之前验证是否存在权限，不存在做一些特殊处理）
 *
 * ----
 *   默认情况下，会和每一个ROUTE都做校验（哪怕之前已经有校验成功的），SWITCH组件可以解决这个问题，和SWITCH CASE一样，只要有一种情况校验成功，就不在向后校验了
 */
render(
    
        
        
         {
            let flag = localStorage.getItem('FLAG');
            if (flag && flag === 'SAFE') {
                return ;
            }
            return '当前环境不安全，不利于支付';
        }}/>

        {/*上述都设置完成后，会在末尾设置一个匹配：以上都不符合的情况下，我们认为路由地址是非法的地址，我们做一些特殊处理（ROTUE不设置PATH是匹配所有地址规则的）*/}
        {/* {
            return 
404
;
        }}/>*/}

        {/*
          * 也可以基于REDIRCT进行重定向
          *   TO [STRING]：重新定向到新的地址
          *   TO [OBJECT]：重新定向到新的地址，只不过指定了更多的信息
          *      {
          *       PATHNAME：定向的地址
          *       SEARCH：给定向的地址问号传参（结合当前案例，真实项目中，我们有时候会根据是否存在问号参数值来统计是正常进入首页还是非正常跳转过来的，也有可能根据问号传参值做不同的事情）
          *       STATE：给定向后的组件传递一些信息（后面会具体聊）
          *      }
          *
          *   PUSH：如果设置了这个属性，当前跳转的地址会加入到HISTORY STACK中一条记录
          *   FROM：设定当前来源的页面地址
          *     
          *     如果当前请求的HASH地址是“/custom”，我们让其重定向到“/custom/list”
          */}
        {/**/}
        
    
, root);

Link && NavLink && WithRouter

import React from 'react';
import {connect} from 'react-redux';
import {Link, NavLink, withRouter} from 'react-router-dom';

/*
 *  Link：是REACT-ROUTER中提供的路由切换组件，基于它可以实现点击时候路由的切换
 *    TO [STRING]：跳转到指定的路由地址
 *    TO [OBJECT]：可以提供一些参数配置项（和REDIRECT类似）
 *      {
 *        PATHNAME：跳转地址
 *        SERACH：问号传参
 *        STATE：基于这种方式传递信息
 *      }
 *    REPLACE:FALSE  是替换HISTORY STACK中当前的地址（TRUE），还是追加一个新的地址（FALSE）
 *
 *  原理：基于LINK组件渲染，渲染后的结果就是一个A标签，TO对应的信息最后变为HREF中的内容
 *    珠峰培训CRM
 *
 *  ------
 *
 *  REACT-ROUTER中提供的组件都要在任何一个ROUTER（HASH-ROUTER）包裹的范围内使用
 *
 *  ------
 *
 *  NAV-LINK：和LINK类似，都是为了实现路由切换跳转的，不同在于，NAV-LINK组件在当前页面HASH和组件对应地址相吻合的时候，会默认给组件加一个ACTIVE样式，让其有选中态
 *    和LINK类似，TO和REPLACE等属性都有，用法一样
 *
 *    activeClassName：把默认加的active样式类改为自己设定的
 *    activeStyle：给匹配的这个NAV-LINK设置行内样式
 *    exact & strict控制匹配的时候是否是严格匹配
 *    isActive：匹配后执行对应的函数
 *
 *    最后也会转换为A标签，如果当前页面的HASH地址和此组件中的TO地址匹配了，则会给渲染后的A标签设置默认的样式类：active
 */

/*
 * WITH-ROUTER：这个方法意思是把一个非路由管控的组件，模拟成为路由管控的组件
 *    受路由管控的组件
 *
 *   WITH-ROUTER(CONNECT()(NAV)) 先把NAV基于CONNECT高阶一下，返回的是一个代理组件PROXY，把返回的代理组件受路由管控
 *
 * 受路由管控组件的一些特点：
 *   1. 只有当前页面的哈希地址（/#/...）和路由指定的地址（PATH）匹配，才会把对应的组件渲染（WITH-ROUTER是没有地址匹配，都被模拟成为受路由管控的）
 *
 *   2. 路由切换的原理：凡是匹配的路由，都会把对应的组件内容，重新添加到页面中，相反，不匹配的都会在页面中移除掉，下一次重新匹配上，组件需要重新渲染到页面中；每一次路由切换的时候（页面的哈希路由地址改变），都会从一级路由开始重新校验一遍；
 *
 *   3. 所有受路由管控的组件，在组件的属性PROPS上都默认添加了三个属性：
 *     HISTORY
 *        PUSH  向池子中追加一条新的信息，达到切换到指定路由地址的目的
 *              this.props.history.push('/plan') JS中实现路由切换
 *        GO    跳转到指定的地址（传的是数字 0当前 -1上一个 -2上两个...）
 *        GO-BACK  <=> GO(-1) 回退到上一个地址
 *        GO-FORWARD <=> GO(1) 向前走一步
 *        ...
 *
 *     LOCATION 获取当前哈希路由渲染组件的一些信息
 *        PATHNAME：当前哈希路由地址   /custom/list
 *        SEARCH：当前页面的问号传参值  ?lx=unsafe
 *        STATE：基于REDIRECT/LINK/NAV-LINK中的TO，传递是一个对象，对象中编写的STATE，就可以在LOCATION.STATE中获取到
 *
 *     MATCH  获取的是当前路由匹配的一些结果
 *       PARAMS：如果当前路由匹配的是地址路径参数，则这里可以获取传递参数的值
 */

class Nav extends React.Component {
    constructor(props, context) {
        super(props, context);
        console.log(props);
    }

    render() {
        return ;
    }
}

export default withRouter(connect()(Nav));

你可能感兴趣的:(react知识点整理)

  • React 前端开发解析：从核心概念到最佳实践 神探阿航 计算机产业科普与思考前端javascript开发语言
    引言React作为当今最流行的前端框架之一，凭借其组件化、声明式编程和高效的虚拟DOM机制，彻底改变了现代Web开发的范式。无论是构建小型应用还是复杂的企业级系统，React都展现出了强大的灵活性和可扩展性。本文将深入探讨React的核心设计思想、性能优化策略以及工程化实践，并通过代码示例演示如何在实际项目中应用这些技术。一、React核心设计思想1.1组件化开发模式React将UI分解为独立可复
  • 【useDeferredValue Hook】将某个值的更新延迟，平衡高优先级和低优先级更新 风茫 ReactReact延迟更新前端
    目录前言语法使用场景示例：使用`useDeferredValue`优化列表渲染`useDeferredValue`和防抖节流的区别前言useDeferredValue是React18引入的一个Hook，用于优化渲染性能。它的主要作用是将某个值的更新延迟，以便在繁忙的渲染过程中优先处理更重要的更新。这在处理高优先级更新（如用户输入）和低优先级更新（如渲染大量数据）时非常有用。语法import{use
  • React框架 常蓬cium 笔记
    文章目录react开始概念安装JSXreact都是有组件构成有状态组件有状态有生命周期class无状态组件函数组件只负责展示安装react项目(脚手架)React出版方:Facebook(脸书)终端的分类:1.原生App:就是用原生语言开发的(如安卓，ios)，性能最高，其它不如混合App2.混合App:采用的原因是审核，维护就是原生(调用硬件)+H5(欠缺调用硬件的能力)3.webApp移动端性
  • 前端框架大比拼：React.js, Vue.js 及 Angular 的优势与适用场景探讨 布兰妮甜 前端框架前端前端框架react.jsvue.jsangular.js
    文章目录前言一、React.js特点使用方法适用场景二、Vue.js特点使用方法适用场景三、Angular特点使用方法适用场景四、如何选择合适的前端框架五、前端框架对项目性能的影响结语前言随着互联网技术的飞速发展，前端开发已经从简单的页面展示演变为复杂的应用构建。为了应对日益增长的需求，各种前端框架应运而生，帮助开发者提高开发效率、优化用户体验。本文将详细介绍当前最流行的三个前端框架——React
  • No thread-bound request found: Are you referring to request attributes outside of an actual web requ SUDO-1 javajava
    Nothread-boundrequestfound:Areyoureferringtorequestattributesoutsideofanactualwebrequest,orprocessingarequestoutsideoftheoriginallyreceivingthread?Ifyouareactuallyoperatingwithinawebrequestandstillrec
  • 常见的 React 代码异味 liangshanbo1215 React代码优化react.js前端前端框架
    在React开发中，代码异味（CodeSmells）是指代码中潜在问题的信号，虽然它们不会直接导致程序崩溃，但暗示代码结构或逻辑可能存在缺陷。识别并解决这些代码异味是提升代码质量、可维护性和性能的关键。1.组件臃肿问题：单个组件承担了太多职责，例如获取数据、渲染和处理事件。functionProductPage(){const[data,setData]=useState([]);useEffec
  • 探索Angular优雅提示的艺术——ngx-sweetalert2深度解析与应用推荐 舒京涌
    探索Angular优雅提示的艺术——ngx-sweetalert2深度解析与应用推荐ngx-sweetalert2Declarative,reactive,andtemplate-drivenSweetAlert2integrationforAngular项目地址:https://gitcode.com/gh_mirrors/ng/ngx-sweetalert2在现代Web开发中，用户体验的提升成
  • react.js 监听页面滚动事件 伟大的python程序员 react.jsreact.js
    componentDidMount(){window.addEventListener('scroll',this.handleScroll);}handleScroll=(event)=>{//滚动条高度letctx=this;letclientHeight=document.documentElement.clientHeight;//可视区域高度letscrollTop=document.d
  • 【Vue入门实践】Element-UI 树形组件el-tree的组件封装 =＞实现组织机构树Tree =＞ 使用vue-content-menu定制可编辑树结构editableTree 小白Rachel 前端工作日记随笔Vue项目实战elementUI组件优化vue.jsuielementuiel-tree组织机构树
    文章资源连接（如果需要付费，联系我修改即可）：https://download.csdn.net/download/Sabrina_cc/87607289好吧吐槽一下，公司决定之后的技术栈都是vue了，我又从React转战回来了。干巴爹好的生活方式，是和一群志同道合的人，一起奔跑在理想的路上！回头有一路的故事，低头有坚定的脚步，抬头有清晰的远方。首先了解Element-UI中定义的基础Tree树组
  • Avalonia+ReactiveUI跨平台路由：打造丝滑UI交互的奇幻冒险 步、步、为营 ui交互.netc#
    一、引言在当今数字化时代，跨平台应用开发已成为大势所趋。开发者们迫切需要一种高效、灵活的方式，能够让应用程序在不同操作系统上无缝运行，为用户提供一致的体验。Avalonia和ReactiveUI的组合，宛如一对天作之合的舞者，在跨平台开发的舞台上翩翩起舞，为我们带来了前所未有的可能。Avalonia是一个开源的跨平台UI框架，它以其强大的跨平台能力而备受瞩目。无论是Windows、Linux还是m
  • 前端构建工具 光影少年 前端软件构建
    前端构建工具是开发现代Web应用时不可或缺的工具，用于优化代码、提升开发效率、以及实现高效的构建和部署。以下是常见的前端构建工具及其作用：1.模块打包工具Webpack特点：功能强大，插件与配置灵活。作用：将模块（JS、CSS、图片等）打包成浏览器可运行的文件。适用场景：中大型项目，需高度自定义。Vite特点：轻量、快速构建，基于ESModules。作用：适合现代框架如Vue、React，热更新速
  • GB/T28181 全栈开发日记[6]：React 快速接入 jessibuca.js 播放器 gospace 从0到实现GB/T28181协议的完整实践javascriptreact.js前端golang音视频
    GB/T28181全栈开发日记[6]：React快速接入jessibuca.js播放器服务端源代码github.com/gowvp/gb28181前端源代码github.com/gowvp/gb28181_web介绍GoWVP(GolangWebVideoPlatfrom)是一个Go语言实现的，基于GB28181-2022标准实现的网络视频平台，负责实现核心信令与设备管理后台部分，支持海康、大华、
  • React Native 0.77 发布：更强的样式支持与性能优化 前端javascript
    CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读ReactNative0.77正式发布！此次版本带来了多项重要改进，包括样式功能的增强、Android平台的性能优化以及项目模板的升级。这一版本的核心目标是提升开发效率，同时确保在不同平台上的兼容性。接下来，我们来看看这次更新中的亮点内容。主要更新内容✨全新CSS特性支持：新增对display:contents、boxSizing、
  • Vue - watch() 监视属性的使用 来一碗刘肉面 Vuevue.js前端javascript
    在Vue3中，watch()是一个用于观察响应式数据的API，可以用来在数据变化时执行某些操作。它是在Vue的组合式API中使用的主要功能之一，允许在代码中细致地控制数据变化的反应。作用：监视数据的变化特点：Vue3中的watch只能监视以下四种数据：ref定义的数据reactive定义的数据函数返回一个值（getter函数）一个包含上述内容的数组基本语法：watch(source,callbac
  • 【useEffect Hook】在组件中执行副作用操作 风茫 Reactreact.jsuseEffect
    引言useEffect是React中用于处理副作用的Hook，它允许你在函数组件中执行类似于类组件生命周期方法的操作。通过useEffect，你可以在组件挂载、更新和卸载时执行某些操作。常见副作用操作：AJAX请求：获取或提交数据。计时器：设置定时任务。异步操作：处理异步逻辑。更改真实的DOM对象：直接操作DOM元素。本地存储：读取或写入浏览器的本地存储。其它会对外部产生影响的操作：例如订阅事件等
  • 詳細講一下RN(React Native)中的列表組件FlatList和SessionList asecretman! reactnativereact.jsjavascript
    1.FlatList基礎使用importReactfrom'react';import{View,Text,FlatList,StyleSheet}from'react-native';exportconstSimpleListDemo:React.FC=()=>{//1.準備數據constdata=[{id:'1',title:'項目1'},{id:'2',title:'項目2'},{id:'3
  • 一个上亿用户的电商平台的架构设计 北京小太阳 java算法
    一.总体架构Listitem客户端层(ClientLayer)Web客户端：使用现代前端框架（如React,Angular,Vue.js）开发响应式网页，保证在不同设备上的良好用户体验。移动客户端：开发iOS和Android原生应用，利用平台特性提供优质用户体验。或者使用ReactNative或Flutter等跨平台框架来节省开发成本。2.API层(APILayer)API设计：设计RESTful
  • 微前端架构在前端开发中的实践与挑战 桂月二二 前端架构
    随着单页面应用（SPA）和前端框架如React、Vue、Angular的快速发展，现代前端应用的复杂度日益提升。尤其是当应用规模逐渐增大时，单一的代码库往往难以应对不同团队的协作和版本管理问题。为了应对这一挑战，微前端架构（MicroFrontends）应运而生，它为前端开发提供了一种新的思路，让大型前端应用能够像后端的微服务架构一样，通过拆分模块来降低复杂度。在这篇文章中，我们将探讨微前端架构的
  • web速览 qzhqbb web前端web
    web速览1.前端开发概述：前端开发是构建网站用户界面的过程，主要关注网站的视觉效果和用户体验。又称为客户端技术栈：HTML（超文本标记语言）：用于创建网页的结构和内容。CSS（层叠样式表）：用于样式和布局设计，包括颜色、字体、边距等。JavaScript：用于实现网页的交互性和动态效果。前端框架：React：一个用于构建用户界面的JavaScript库，采用组件化设计。Vue.js：一个渐进式的
  • 基于 React hooks + Typescript + Cesium 实现通视分析 jiegiser# webgiscesium通视分析webgis三维可视化typescriptreacthooks
    文章目录效果截图功能介绍实现思路实现步骤核心代码插值计算绘制分析线效果截图先上截图：功能介绍通视分析是指以某一点为观察点，研究某一区域通视情况的地形分析。用户在模型上选取任意两点之间是否可以互相可见的技术方法，主要用于判断任意两点之间能否通视；图层管理（√）dom点扩散（√）轨迹回放（√）测量（√）坐标拾取（√）加载模型数据，拾取三维模型（√）geoserver结合实现属性查询（√）geoserv
  • React+Cesium基础教程（002）：创建基于React和Cesium的加载第三方地图服务及地图叠加 叁拾舞 Ceisumreact.js前端框架Cesium
    文章目录加载第三方地图服务加载OpenStreetMap加载高德地图加载天地图加载矢量地图加载影像地图加载地形图地图叠加加载第三方地图服务在Cesium中，可以加载第三方地图服务（如高德地图、天地图、OpenStreetMap）作为底图。Cesium提供了多种方式来加载瓦片地图，包括ImageryLayer和TileMapServiceImageryProvider等。在Cesium中加载第三方地
  • Spring Boot 3.4 正式发布，结构化日志！ m0_74823264 面试学习路线阿里巴巴springboot后端java
    1从SpringBoot3.3升级到3.41.1RestClient和RestTemplate新增对RestClient和RestTemplate自动配置的支持，可用ReactorNetty的HttpClient或JDK的HttpClient。支持的客户端优先级：ApacheHTTPComponents(HttpComponentsClientHttpRequestFactory)JettyCli
  • 基于Langchain框架，采用Qwen2.5大模型，搭建自己的Agent，ReACT效果比RAG好 张登杰踩 langchainpython人工智能语言模型
    最近在做RAG，调研后发现ReACT好像更具有说服力，对最终结果的解释也更加合理。举个例子，我扔给大模型这样一个问题：15的平方是多少？另外，法国的首都是哪里？采用ReACT的运行结果如下：>EnteringnewAgentExecutorchain...我需要先计算15的平方，然后搜索法国的首都。Action:平方计算器ActionInput:"15"Observation:15的平方等于225
  • Vue - toRefs() 和 toRef() 的使用 来一碗刘肉面 Vuevue.js前端javascript
    一、toRefs()在Vue3中,toRefs()可以将响应式对象的属性转换为可响应的refs。主要用于在解构响应式对象时，保持属性的响应性。1.导入toRefs函数import{toRefs}from'vue';2.将响应式对象的属性转换为refconststate=reactive({count:0,message:'Hello,Vue3!'});//toRefs()接受一个响应式对象，并返回
  • 打造高效React应用：CSS方案深度解析
    大家好，我是长林啊！一个爱好JavaScript、Go、Rust的全栈开发者；致力于终生学习和技术分享。在React以其声明式编程范式和组件化架构，成为了构建用户界面的首选技术之一。然而，随着项目规模的扩大和设计需求的多样化，如何高效地管理CSS样式成为了每个React开发者都需要面对的挑战。本文将从一下三个方面进行介绍，探讨如何在React中应用和管理样式，包括内联样式、CSS类、CSSModu
  • React 前端框架开发详细操作 编码小袁 前端框架
    一、引言在当今的web开发领域，React作为一款流行的前端框架，以其高效的组件化开发模式、虚拟DOM带来的高性能以及灵活的生态系统，受到了广大开发者的青睐。无论是开发小型的单页应用还是大型的企业级项目，React都能展现出强大的能力。本文将详细介绍React前端框架的操作使用方法，帮助开发者快速上手并深入理解React开发。二、环境搭建在开始使用React进行开发之前，需要先搭建好开发环境。以下
  • React 前端框架简介与应用 仰望丨苍穹 前端：技巧与实践前端框架react.js前端
    React是一个用于构建用户界面的JavaScript库，在前端开发中被广泛应用。1：主要特点1.1：组件化开发React提倡以组件的方式构建用户界面。每个组件都具有独立的功能和逻辑，可以重复使用和组合，提高了开发效率和代码的可维护性。例如，一个网页中的导航栏、侧边栏、内容区域等都可以分别构建为不同的组件。1.2：虚拟DOMReact引入了虚拟DOM（VirtualDOM）的概念。当数据发生变化时
  • React 前端框架：简介与核心概念 一ge科研小菜鸡 工具前端框架
    React是由Facebook开发和维护的一个用于构建用户界面的JavaScript库。它专注于通过组件化的方式构建单页应用（SPA），允许开发者高效地创建复杂、交互性强的界面。React的核心特点是其虚拟DOM、组件化开发和声明式编程，使其成为目前最流行的前端开发框架之一。1.React的优势1.1组件化开发React的核心是组件（Component），它允许开发者将界面划分为多个独立的、可重用
  • 探索React前端框架：JavaScript技巧与最佳实践 自由翱翔碧海蓝 javascriptreact.js前端框架js
    React是一个广泛使用的JavaScript前端框架，它提供了一种组件化的开发模式，使得构建交互式用户界面变得更加简单和高效。在本文中，我们将深入探讨React框架的一些关键技巧和最佳实践，同时提供相应的源代码示例。合理使用函数组件和类组件React提供了两种主要的组件类型：函数组件和类组件。函数组件是纯粹的JavaScript函数，而类组件则是通过继承React.Component类创建的。在
  • swiper移入暂停_用Swiper插件实现无缝轮播的品牌展示，鼠标移动停止，鼠标移出无缝移动视觉效果... weixin_39726971 swiper移入暂停
    正常操作，正常分析，大家好，我是D1n910。文章关键词：技术前端JQuery入门滚动文章前言：公司要求做官网呀呀呀，其中有一部分设计是要求我们最亲爱的品牌商的LOGO能够在底部无缝轮播，鼠标移上去就停下来。效果如下：一、使用插件介绍1、使用的框架是JQuery，因为讲究快速、兼容、展示，所以没有用vue、react之类的看起来高大上的框架。2、使用的是优秀的轮播插件Swiper3.0版(实际上S
  • java杨辉三角 3213213333332132 java基础
    package com.algorithm; /** * @Description 杨辉三角 * @author FuJianyong * 2015-1-22上午10:10:59 */ public class YangHui { public static void main(String[] args) { //初始化二维数组长度 int[][] y
  • 《大话重构》之大布局的辛酸历史 白糖_ 重构
    《大话重构》中提到“大布局你伤不起”，如果企图重构一个陈旧的大型系统是有非常大的风险，重构不是想象中那么简单。我目前所在公司正好对产品做了一次“大布局重构”，下面我就分享这个“大布局”项目经验给大家。   背景         公司专注于企业级管理产品软件，企业有大中小之分，在2000年初公司用JSP/Servlet开发了一套针对中
  • 电驴链接在线视频播放源码 dubinwei 源码电驴播放器视频ed2k
    本项目是个搜索电驴（ed2k）链接的应用,借助于磁力视频播放器（官网： http://loveandroid.duapp.com/ 开放平台），可以实现在线播放视频，也可以用迅雷或者其他下载工具下载。 项目源码： http://git.oschina.net/svo/Emule,动态更新。也可从附件中下载。 项目源码依赖于两个库项目，库项目一链接： http://git.oschina.
  • Javascript中函数的toString()方法 周凡杨 JavaScriptjstoStringfunctionobject
    简述     The toString() method returns a string representing the source code of the function.     简译之，Javascript的toString()方法返回一个代表函数源代码的字符串。 句法     function.
  • struts处理自定义异常 g21121 struts
    很多时候我们会用到自定义异常来表示特定的错误情况，自定义异常比较简单，只要分清是运行时异常还是非运行时异常即可，运行时异常不需要捕获，继承自RuntimeException，是由容器自己抛出，例如空指针异常。 非运行时异常继承自Exception，在抛出后需要捕获，例如文件未找到异常。 此处我们用的是非运行时异常，首先定义一个异常LoginException: /** * 类描述：登录相
  • Linux中find常见用法示例 510888780 linux
    Linux中find常见用法示例 ·find   path   -option   [   -print ]   [ -exec   -ok   command ]   {} \; find命令的参数；
  • SpringMVC的各种参数绑定方式 Harry642 springMVC绑定表单
    1. 基本数据类型(以int为例，其他类似)： Controller代码： @RequestMapping("saysth.do") public void test(int count) { } 表单代码： <form action="saysth.do" method="post&q
  • Java 获取Oracle ROWID aijuans javaoracle
    A ROWID is an identification tag unique for each row of an Oracle Database table. The ROWID can be thought of as a virtual column, containing the ID for each row. The oracle.sql.ROWID class i
  • java获取方法的参数名 antlove javajdkparametermethodreflect
    reflect.ClassInformationUtil.java package reflect; import javassist.ClassPool; import javassist.CtClass; import javassist.CtMethod; import javassist.Modifier; import javassist.bytecode.CodeAtt
  • JAVA正则表达式匹配 查找 替换 提取操作 百合不是茶 java正则表达式替换提取查找
    正则表达式的查找;主要是用到String类中的split();       String str;      str.split();方法中传入按照什么规则截取,返回一个String数组   常见的截取规则: str.split("\\.")按照.来截取 str.
  • Java中equals()与hashCode()方法详解 bijian1013 javasetequals()hashCode()
    一.equals()方法详解     equals()方法在object类中定义如下：  public boolean equals(Object obj) { return (this == obj); }    很明显是对两个对象的地址值进行的比较（即比较引用是否相同）。但是我们知道，String 、Math、I
  • 精通Oracle10编程SQL(4)使用SQL语句 bijian1013 oracle数据库plsql
    --工资级别表 create table SALGRADE ( GRADE NUMBER(10), LOSAL NUMBER(10,2), HISAL NUMBER(10,2) ) insert into SALGRADE values(1,0,100); insert into SALGRADE values(2,100,200); inser
  • 【Nginx二】Nginx作为静态文件HTTP服务器 bit1129 HTTP服务器
     Nginx作为静态文件HTTP服务器 在本地系统中创建/data/www目录，存放html文件(包括index.html) 创建/data/images目录，存放imags图片 在主配置文件中添加http指令   http { server { listen 80; server_name
  • kafka获得最新partition offset blackproof kafkapartitionoffset最新
    kafka获得partition下标，需要用到kafka的simpleconsumer   import java.util.ArrayList; import java.util.Collections; import java.util.Date; import java.util.HashMap; import java.util.List; import java.
  • centos 7安装docker两种方式 ronin47
          第一种是采用yum 方式              yum install -y docker           
  • java-60-在O(1)时间删除链表结点 bylijinnan java
    public class DeleteNode_O1_Time { /** * Q 60 在O(1)时间删除链表结点 * 给定链表的头指针和一个结点指针(!!)，在O(1)时间删除该结点 * * Assume the list is: * head->...->nodeToDelete->mNode->nNode->..
  • nginx利用proxy_cache来缓存文件 cfyme cache
    user  zhangy users; worker_processes 10; error_log  /var/vlogs/nginx_error.log  crit; pid        /var/vlogs/nginx.pid; #Specifies the value for ma
  • [JWFD开源工作流]JWFD嵌入式语法分析器负号的使用问题 comsci 嵌入式
        假如我们需要用JWFD的语法分析模块定义一个带负号的方程式，直接在方程式之前添加负号是不正确的，而必须这样做：     string str01 = "a=3.14;b=2.71;c=0;c-((a*a)+(b*b))"     定义一个0整数c,然后用这个整数c去
  • 如何集成支付宝官方文档 dai_lm android
    官方文档下载地址 https://b.alipay.com/order/productDetail.htm?productId=2012120700377310&tabId=4#ps-tabinfo-hash 集成的必要条件 1. 需要有自己的Server接收支付宝的消息 2. 需要先制作app，然后提交支付宝审核，通过后才能集成 调试的时候估计会真的扣款，请注意
  • 应该在什么时候使用Hadoop datamachine hadoop
    原帖地址：http://blog.chinaunix.net/uid-301743-id-3925358.html 存档，某些观点与我不谋而合，过度技术化不可取，且hadoop并非万能。 --------------------------------------------万能的分割线-------------------------------- 有人问我，“你在大数据和Hado
  • 在GridView中对于有外键的字段使用关联模型进行搜索和排序 dcj3sjt126com yii
    在GridView中使用关联模型进行搜索和排序 首先我们有两个模型它们直接有关联: class Author extends CActiveRecord { ... } class Post extends CActiveRecord { ... function relations() { return array( '
  • 使用NSString 的格式化大全 dcj3sjt126com Objective-C
    格式定义The format specifiers supported by the NSString formatting methods and CFString formatting functions follow the IEEE printf specification; the specifiers are summarized in Table 1. Note that you c
  • 使用activeX插件对象object滚动有重影 蕃薯耀 activeX插件滚动有重影
      使用activeX插件对象object滚动有重影   <object style="width:0;" id="abc" classid="CLSID:D3E3970F-2927-9680-BBB4-5D0889909DF6" codebase="activex/OAX339.CAB#
  • SpringMVC4零配置 hanqunfeng springmvc4
    基于Servlet3.0规范和SpringMVC4注解式配置方式，实现零xml配置，弄了个小demo，供交流讨论。     项目说明如下： 1.db.sql是项目中用到的表，数据库使用的是oracle11g 2.该项目使用mvn进行管理，私服为自搭建nexus,项目只用到一个第三方 jar，就是oracle的驱动； 3.默认项目为零配置启动，如果需要更改启动方式，请
  • 《开源框架那点事儿16》：缓存相关代码的演变 j2eetop 开源框架
    问题引入 上次我参与某个大型项目的优化工作，由于系统要求有比较高的TPS，因此就免不了要使用缓冲。 该项目中用的缓冲比较多，有MemCache，有Redis，有的还需要提供二级缓冲，也就是说应用服务器这层也可以设置一些缓冲。 当然去看相关实现代代码的时候，大致是下面的样子。 [java] view plain copy print ? public vo
  • AngularJS浅析 kvhur JavaScript
    概念 AngularJS is a structural framework for dynamic web apps. 了解更多详情请见原文链接：http://www.gbtags.com/gb/share/5726.htm Directive 扩展html，给html添加声明语句，以便实现自己的需求。对于页面中html元素以ng为前缀的属性名称，ng是angular的命名空间
  • 架构师之jdk的bug排查(一)---------------split的点号陷阱 nannan408 split
    1.前言.    jdk1.6的lang包的split方法是有bug的,它不能有效识别A.b.c这种类型,导致截取长度始终是0.而对于其他字符,则无此问题.不知道官方有没有修复这个bug. 2.代码 String[] paths = "object.object2.prop11".split("'"); System.ou
  • 如何对10亿数据量级的mongoDB作高效的全表扫描 quentinXXZ mongodb
      本文链接:  http://quentinXXZ.iteye.com/blog/2149440 一、正常情况下，不应该有这种需求 首先，大家应该有个概念，标题中的这个问题，在大多情况下是一个伪命题，不应该被提出来。要知道，对于一般较大数据量的数据库，全表查询，这种操作一般情况下是不应该出现的，在做正常查询的时候，如果是范围查询，你至少应该要加上limit。 说一下，
  • C语言算法之水仙花数 qiufeihu c算法
    /** * 水仙花数 */ #include <stdio.h> #define N 10 int main() { int x,y,z; for(x=1;x<=N;x++) for(y=0;y<=N;y++) for(z=0;z<=N;z++) if(x*100+y*10+z == x*x*x
  • JSP指令 wyzuomumu jsp
    jsp指令的一般语法格式： <%@ 指令名 属性 =”值 ” %> 常用的三种指令： page,include,taglib page指令语法形式： <%@ page 属性 1=”值 1” 属性 2=”值 2”%> include指令语法形式： <%@include file=”relative url”%> (jsp可以通过 include
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他