react知识汇总

你的名字 2022-09-04 06:47 172阅读 0赞

参考：[React面试全解 - 知乎][React_ -]

一、为什么用react

1、开发团队是fackbook团队，实力强大，开源
    2、社区完善，很多问题都能找到
    3、很多国内外大型互联网公司都在使用
    4、优秀的diff算法、高效，使用虚拟dom，不直接操作页面

二、虚拟dom

DOM:浏览器本质，以js对象的方式表示页面元素，并提供api
    按需更新就是用到了虚拟dom，通过比较新旧两颗DOM结构,按需更新
    虚拟DOM：用JS对象模拟页面上的DOM和DOM嵌套关系，使DOM高效更新
    var div = {
       tagname:'div'
       attr:{
        id:'test'
        }
    }

三、diff算法

diff：新旧两颗DOM树对比时，需要逐层比较，这个过程就是diff算法；
    
    数据改变的时候，react不会直接到去修改dom，而是生成新的虚拟dom，通过对比旧的虚拟dom，有改变的标签或节点就会生成对应部分的真实dom，没改变的部分则直接使用旧的真实dom
    
    为什么不建议使用index作为key值？
    key作为虚拟dom的唯一标识，如果有逆向增加、逆向删除等操作，key值就会变乱，导致dom全部重新生成，页面渲染变慢甚至出现数据混乱

webpack搭建项目并启动：

npm init -y 初始化
    npm i webpack webpack-cli -D //安装webpack
    npm i webpack-dev-server -D  //安装自动运行，将打包后的main.js放在根目录
    npm i html-webpack-plugin -D  //将index.html放到根目录内存

pack.json

"scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack",
        "start": "webpack serve --open chrome.exe"
      },

webpack.config.js

const path = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin')//导入自动自动生成index.html页面到根目录
    
    const htmlPlugin = new HtmlWebpackPlugin({
        template:path.join(__dirname,'./src/index.html'),//源文件路劲，__dirname是当前目录
        filename:'index.html' //内存页生成的文件名称
    })
    
    module.exports = {
        mode:'production',
        plugins:[
            htmlPlugin
        ]
    }

webpack结合react使用jsx过程和所需安装的包

[babel升级,踩坑!Error: Cannot find module '@babel/core'\_兔子零-CSDN博客][babel_Error_ Cannot find module _babel_core_-CSDN]

JSX语法（创建虚拟dom的最简单最直接方式）

const a = 1000
    const jsxDom = <p>你好</p>
    const title = 'testval'
    
    ReactDom.render(<div 
        title={title}>
        {a}{jsxDom}
        {
       {arr.map(item=><h3 key={item}>{
       {item}}</h3>)}} //循环需要加key
    </div>,
    document.getElementById('app')
    )

创建组件和传值（父传子）：

const dog= {
        name:'小狗'
        age:3
    }
    
    function Hello (props) { //方法名开头一定要大写
        return <div>Hello组件，传值{props.name},{props.age}</div>
    }
    
    ReactDom.render(<div>
        <Hello name={dog.name} age={dog.age}></Hello>
        //或使用扩展
        <Hello {...dog}></Hello>
    </div>)
    
    法二、
    新建Hello.jsx文件:
    import React from 'react'  //组件文件要引入，大写R开头
    export default function Hello (props) { //方法名开头一定要大写
        return <div>Hello组件，传值{props.name},{props.age}</div>
    }
    引入：
    import Hello from 'xxx/xxx/Hello.jsx'
    
    法三、使用class创建
    class ClassName extends React.Component{
        render(){
            return <div>{this.props.name}</div> //直接使用this.props拿到传值
            
        }
    }

子传父

状态在哪，就在哪操作
    父把操作的方法传给子，子通过prop调用这个方法，把新数据通过参数的形式返回给父来操作。
    父:
    const getChildToChange = ()=>{//todo}
    <child getChildToChange={this.getChildToChange}>
    
    子：
    const { getChildToChange } = this.prop
    getChildToChange(childdata)
    
    祖孙则再传一层

消息的发布和订阅（兄弟组件传值）

?/安装
    npm i pubsub-js --save
    //引入
    import PubSub from 'pubsub-js'
    //A组件发布
    PubSub.public('ecentName',dataArr)
    B组件接收
    this.sub = PubSub.subscribe('ecentName',(msg,data)=>{ data//就是传过来的值 })
    
    卸载发布
    PubSub.unsubscribe(this.sub)

prop的类型限制

//npm i props-types
    import PropTypes from 'props-types'
    class Child extends React.Component{
        static PropTypes = {
            value1:propsTypes.array.isRequired,//限制传数组
            valueName2:propsTypes.func.isRequired //限制传函数
        }
    }

class创建的组件可以有私有变量属性，可读可改

class ClassName extends React.Component{
        constructor(){//构造函数里面的this是指向ClassName实例
            super() //子类自定义构造器，必须要调用super
    
            this.state = {  //相当于vue中data定义值
                test:'这是值'
            }
            this.test = this.test.bind(this)//将原型上的test方法改变this指向后，生成test挂在实                
                                                例上，使test方法里的this指向ClassName实例
        }
        render(){//react会默认new生成实例调用render方法
            return <div>
                {this.props.name}--{this.state.test}
                <div onClick = {this.test}>点击</div>
                //<div onClick = {()=>this.test()}>点击</div> //上面不写bind时用
    
            </div> //直接使用this.props拿到传值
            
        }
        test(){//类中的方法都是挂在原型对象上，实例调用时里面的this才是指向ClassName实例否undefind
            this.setState({ //修改state定义的值，此方法是异步，需要在回掉中拿到最新值
                test:'newval'
            },function(){
                console.log(this.state.test)
            })
        }
    }
    ClassName.propTypes = {
        name:PropTypes.string.isRequired,//限制为字符串和必须传
        age:PropTypes.number,
        tools:PropTypes.func,//传的是方法，类型则是func
    }
    ClassName.defaultProps = {//设置默认值
        age:18,
    }

class创建的组件简化写法：

在类里面直接通过key=value会吧key挂在实例上，而不是原型上
    class ClassName extends React.Component{
        state = {//初始化状态
           name:'xxz',
           age:18
        }
    
        render(){//取值渲染
            const { age } = this.state
            return <div onClick={this.test}  >年龄：{age}</div>
        }
    
        test = ()=>{//自定义方法
            this.setState({age:20})
        }
    }

JSX使用style和class

style：
    render(<div style={
       {fontSize:'12px'}}></div>)
    
    class：
    新建styleObj.scss文件:
    .title{
        colot:red
    }
    使用的js文件引入：
    import styleObj from '../../styleObj.scss' //模块化
    render(<div className={styleObj.title}></div>)

ref

方式一、字符串式（不建议用，影响效率）
    <div ref='mydef'></div>
    实例：this.refs.mydef
    
    方式二、回调函式(内联式在数据更新时执行两次)
    <div ref={(c)=>this.myref=c}></div> //直接创一个变量myref挂载在实例上，c就是当前节点dom
    使用：const { myref } =  this
    
    方式三、使用React.createRef(推荐)
    <div ref={this.myref}></div>
    class里面：
    myref = React.createRef() //多个ref则名称要不一样
    console.log(this.myref.current) //拿到dom

可控和不可控组件

不可控：通过ref取值的不可控
    可控：通过函数，将值挂载到state

高阶函数和函数柯里化

高阶函数：A函数接收到参数是一个函数或A函数返回值是一个函数,那A函数就是高阶函数
    如:Promise、setTimeout、arr.map(()=>{})等等
    
    函数柯里化：函数会不停的返回函数，并且通过一个函数接收一个参数来处理

原生事件想传额外的值

//高阶函数实现
    <input type='checkbox' onChange={this.checkChange(id)}>
    const checkChange = (id)=>{
        return (e)=>{
            console.log(id,e.target.checked)
        }
    }
    
    //普通函数实现
    <input type='checkbox' onChange={()=>{this.checkChange(id)}}>
    const checkChange = (id)=>{
        console.log(id)
    }

生命周期

一、初始化阶段ReactDOM.render()
    constructor()
    componentWillMount()  //后期要加UNFATE_componentWillMount() 
    render()
    componentDidMount()
    
    二、更新阶段
    componentWillReceiveProps() //props改变  /后期要加UNFATE_
    shouldComponentUpdate()
    componentWillUpdate() /后期要加UNFATE_
    render()
    componentDidUpdate()
    
    三、卸载ReactDOM.unmontComponentAtNode()
    componentWillUnmount()

新生命周期

//渲染阶段
    constructor()
    getDerivedStateFromProps() //需要返回state对象或null
    render()
    componentDidMount()
    
    //更新阶段
    getDerivedStateFromProps()
    shouldComponentUpdate()
    render()
    getSnapshotBeforeUpdate(preProp,preState) //返回任意值除了undefined，componentDidUpdate接收 
    componentDidUpdate(preProp,preState,snapshot)
    
    //卸载
    componentWillUnmount()

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA55-l5LqG6L-Y5rKh552h_size_20_color_FFFFFF_t_70_g_se_x_16][]

样式模块化，防止冲突，相当于vue中的scoped

创建时css文件名：xxx.module.css
    使用：
    import democss from './xxx.module.css'
    className = {democss.xxx}

react的 vscode插件

快捷创建组件插件：ES7 React/Redux/GraphQL/React-Native snippets
    输入rcc或rfc

配置代理

代理：相当于本地开一个服务器，前端向本地服务器发起请求，本地服务器再向远程服务器转发，
          本地服务器和远程服务器不存在跨域
    法一：在pack.json文件里
    "proxy":"http://xxxx:5000"
    
    法二：配置多个代理
    1、在src下新建setupProxy.js
    2、
    const proxy = require('http-proxy-middleware')//react默认已安装
    module.exports = function(app){
        app.use(
            proxy('/api',{//带有api的都或触发此代理
                target:'http://localhost:5000',
                changeOrigin:true,//将请求头的host改成和远程服务器的一样
                pathRewrite:{'^/api':''}
            }
                
            )
        )
    }

连续性结构赋值

如：
    const this= {
        item:{
            name:'test'
        }
    }
    
    const {item:{name}} = this
    console.log(name)//test
    //改字段名
    const {item:{name:newname}} = this
    console.log(newname)//test

[React_ -]: https://zhuanlan.zhihu.com/p/76909668
[babel_Error_ Cannot find module _babel_core_-CSDN]: https://blog.csdn.net/weixin_43764814/article/details/89070212
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA55-l5LqG6L-Y5rKh552h_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/385726fc559e4f21ac0017653a60f050.png