react知识梳理

react基础知识

1.react的基本概念

React是Facebook开发出的一款JS库 Facebook认为MVC无法满足他们的扩展需求

特点
1.react不使用模板
2.react 不是一个MVC框架
3.响应式
4. react是一个轻量级的js库

原理

虚拟DOM react把DOM抽象成为一个JS对象
diff算法

1.虚拟DOM确保只对界面上真正发生变化的部分进行实际的DOM操作
2.逐层次的来进行节点的比较

react 历史轴
2013

2.react 开发环境的搭建

1.react.js 核心文件
2.react-dom.js 渲染页面中的DOM 当前文件依赖于react核心文件或者(react-native)
3.babel.js ES6转换成ES5 JSX语法转换成javascript 现今浏览器进行代码的兼容

下载
react 核心包 npm i react --save
react-dom npm i react-dom --save
babel npm i babel-standalone --save

3.jsx基本使用

        // 1.注释  /**/
        let MyDom=

                    {/*我是需要注释的内容*/}
                    hello
                  
        ReactDOM.render(MyDom,document.getElementById("demoReact"))

4.jsx进阶使用

使用表达式
渲染数组
属性设置
// 注意在jsx 不能使用class 这个属性 因为class是js的关键字 className
jsx独立文件

5.react列表渲染

map()

6.react遍历对象

        let obj={
            name:"xixi",age:18,sex:"男"
        }
        let myDom=

                { Object.keys(obj).map((v,i)=>{
                     return 
便利的属性是：{v}-------便利出来的值是:{obj[v]}
                 })}
            
        
            ReactDOM.render(myDom,document.getElementById("demoReact"));

7.面向组件编程基础

组件到底是什么？
高耦合低内聚
高耦合就是吧逻辑紧密的内容放在一个组件当中 低内聚吧不同组件的依赖关系尽量弱化 每个组件眼尽可能的独立起来

组件当中的重要内容
1.构建方式
2.组件的属性
3.生命周期

演变过程 传统的组件有几个明显的特点 1，简单的封装 2 简单的生命周期的呈现 3.明显的数据流动 当一个项目比较
复杂的时候 传统的组件化根本不能很好的把结构样式和行为结合 让项目很难以维护

react的组件分为3个部分 1 属性props 2 状态 state 3 生命周期

react的组件 是一个非常重要的概念 通过组件可以吧页面中的ui部分切分成 独立 高复用性的部件 让每个开发者更加专注于
一个个独立的部件

组件与组件化
组件 就是用实现页面局部功能的代码集合 简化页面的复杂程度 提高运行效率
组件化 当前程序都是使用组件完成的 那么就是一个组件话的应用

组件的创建
1.函数组件/无状态组件
2.类组件
1.

            // 无状态组件的创建方式
               function MyCom(){
                   return (
                       
我是一个无状态组件
                   )
               } 
            //    组件就是自定义标签
            // 调用组件
            let com=

                         
                         
                    

            ReactDOM.render(com,document.getElementById("demoReact"));

            // 创建类组件  组件名首字母大写
            class MyCom extends React.Component{
                render(){
                    return(
                        
类组件
                    )
                }
            }
            let com=

            ReactDOM.render(com,document.getElementById("demoReact"));

8.props

函数组件

            //   props是react中一个重要的属性  是组件对外的接口   我们props就可以从组件的外部向组件的内部进行数据的传递
            //   也可以完成父组件给子组件的数据传递
                //  注意：无论是无状态组件还是类组件 我们都不饿能修改自身的props
                
                function Com(props){
                    return (
                        
我是一个无状态组件------外部传递数据是：{props.text}---{props.num}
                    )
                }

                let obj={
                    text:"我是text数据",
                    num:"我是num"
                }

            ReactDOM.render(,document.getElementById("demoReact"));

类组件

                class Com extends React.Component{
                    render(){
                        return(
                            

                                我是类组件---{this.props.name}---{this.props.num}
                            
                        )
                    }
                }

                let obj={
                    name:"我是数据name",
                    num:"我是数据num"
                }
            ReactDOM.render(,document.getElementById("demoReact"));

无状态组件的props验证和 默认值

                Com.defaultProps={
                    name:"我是props中name的默认值"
                }
                Com.propTypes={
                    name:PropTypes.number,//验证name这个props传递进来的数据必须是number类型
                    age:PropTypes.number.isRequired
                }

                let num=9527
                let agetext=18
            ReactDOM.render(,document.getElementById("demoReact"));

9.state

            // state 状态
            // state和props的区别
            // props是组件对外的接口  state是组件对内的接口
            // 组件内可以引用其他组件   组件之间的引用就形成了一个树状的接口  如果下层组件需要使用上层组件的数据 
            // 上曾组建就可以通过下层组件中props来进行数据的传递 因此props就是组件对外的接口
            
            // 组件除了使用上层组件传递的数据之外 他自身也可能有需要管理的数据  这个对内管理数据的属性就是state
            // 主要区别：
            // 1.state是可变的 
            // 2.props对于当前页面的组件来说  他是只读 如果我们想修改props中的数据 那么我们修改传递给当前组件数据的父组件中的内容



            // react中我们只需要关心的是数据  当数据改变的时候页面就会自动的发生改变 
            // 状态等同于页面中的数据   状态/数据改变了---页面中对应的数据绑定内容就会被react自动的进行改变

            // 声明式渲染  ---  一切的数据改变操作都不用我们关心 只需要我们生命好数据  react就会自动的对于数据进行相应的改变
             
            //  如果想使用状态  那么不能使用无状态组件
            class Com extends React.Component{
                // 在ES6中不管子类写不写constructor 在new实力的时候都会不上consttructor。
                // 我们可以不写 但是如果我们写了constructor 之后就必须在其中协商super() 就是指向父类的构造方法
                constructor(props){
                    // 如果想在consternation使用props 那么super中必须写上props   
                    super(props)

                    // 定义state
                    this.state={
                        name:"西西"
                    }
                }
                render(){
                    return (
                        // this.setState({key:newValue}) 异步的  react就会自动的触发render进行数据的渲染
                        

                            {this.setState({name:"哈哈"})}}>点我改变state的数据
                            
我是一个组件-----{this.state.name}
                        
                    )
                }
            }
           
           
           
            ReactDOM.render(,document.getElementById("demoReact"));

插入html标签dangerouslySetInnderHTML={{__HTML:你要插入的字符串}}

10.ref转发

        // 转发 refs    react当中提供了一个ref的数据 （不能再无状态组件当中来进行使用  因为无状态组件没有实例）
        // 表示当前组件的真正实例的引用  他会返回绑定当前属性的元素
        //    标识组件内部的元素---方便我们查找

        // react给我们3种方式进行ref的使用
        // 1、字符串的方式
        // 2.回调函数（推荐）
            // 就是在dom节点上或者组件上挂在函数  函数的入参形参 是dom接地那  他的效果和字符串的方式是一样的都是获取值得引用
        // 3.React.createRef()（react16.3新提供的一种方式）
        // 把值付给一个变量  通过ref挂在在节点或者足尖上  使用ref的current属性拿到这个节点  


        // 官方当中建议我们  不要过度的使用refs对逻辑进行处理  需要优先考虑state

        class Com extends React.Component{

            constructor(props){
                super(props)
                this.myRef=React.createRef();
            }



            fun=()=>{
                // console.log(this.refs.demoInput.value)
                // console.log(this.textinput.value)
                console.log(this.myRef.current.value)
            }
            render(){
                return(
                    

                        我是组件
                     {/* 
                        点我得到输入框的值*/}

                        {/*{this.textinput=input}} placeholder="请输入"/>
                        点我得到输入框的值*/}
                        
                        
                        点我得到输入框的值
                    
                )
            }
        }

            ReactDOM.render(,document.getElementById("demoReact"));

11.react事件与this

在这里插入代码片

12.状态提升

    // 状态提升  多个组件需要反映相同的变化数据  ，提升到他们最近的一个父组件中  

    // 多个子组件需要利用到对方状态的情况下 那么这个时候就需要使用到状态提升

13.create -react-app创建

1.create-react-app 是facebook官方退出的一款react的脚手架
为什么？
安装插件麻烦


电脑上面必须有node   升级到最新版本


安装
1.npm install -g create-react-app  全局安装脚手架
2，create-react-app --version  查看版本
3.cd 需要创建的文件夹中,create-react-app myapp
4.npm start 启动项目

1.public 静态资源文件夹
2.src 写代码的地方
1.json-server 模拟数据的 npm install json-server -g

启动 cd mock文件夹下
json-server json数据的名字 --port 4000

2.axios 数据请求 npm install --save axios
在页面中引用axios

15.解决跨域

解决跨域
安全机制 同源策略 通端口同域名
react解决跨域：
1.正向代理–开发环境 一个位于客户端和目标服务器之间的代理服务器 为了获取到目标服务器的内容 客户端向代理服务器发送一个请求 代理服务器
帮助我们去目标服务器里面获取数据并且返回给我们
2.反向代理–上线环境 可以通过代理服务器来接受网络上的请求连接 然后将这个请求转发给内部的网络服务器上 并且把这个服务器上得到的数据返回给网络
请求的客户端 这个时候代理服务器对外的表现就是一个反向代理

模拟请求真实的网络接口 中国天气网中的数据

找到文件 项目\node_modules\react-scripts\config\webpackDevServer.config.js
代理

  proxy:{
      "/api":{
        target:"http://www.weather.com.cn/data/cityinfo",
        changeOrigin:true,
        "pathRewrite":{
          "^/api":"/"
        }
      }
    },

16.react-router-dom路由基础

路由 --根据 url的不同来切换对应的组件 实现spa（单页面应用） 在页面切换的时候不会刷新 更加接近原生体验

v5版本

1下载 npm install --save react-router-dom

router-router 只提供了一些核心的API
router-router-dom 更多的一些选项

路由模式：
hash HashRouter （hash 模式 带#号 刷新的时 候页面不会丢失）
browser BrowserRouter 历史记录模式 没有#号 他是通过历史记录api来进行路由切换的 刷新会丢失 本地模式不会

2.index.js引用路由模块

3.路由模式包裹根组件
ReactDOM.render(, document.getElementById(‘root’));

4引用import {Route} from ‘react-router-dom’

5配置 Route

路由导航 Link to=“去哪里” NavLink 可以动态的给选中的导航添加active的类名

26.redux

  // redux    javascript提供的一个可预测性(我们给一个固定的输入 那么必定可以等到一个结果)的状态容器

  // 集中的管理react中多个组件的状态

  // redux是一个专门的状态管理库  （在vue等当中也可以使用  但是在react中会比较多）

  // 需求场景 
  // 某个组件的状态需要共享的时候
  // 一个组件需要改变另外一个组件状态的时候
  // 组件中的状态需要在任何地方都可以拿到

  // 三大原则：
  // 1.单一数据源   整个react中的状态都会被统一的管理到store
  // 2.state是只读的  我们不能够直接改变state 而是要通过触发redux中的特定方法来进行修改
  // 3.使用纯函数来执行修改操作： action来改变redux中的state 

  // 下载    npm install --save redux