zoukankan      html  css  js  c++  java
  • 2019JAVA最新课程-React从入门到实战(新)

    React是一个库,通过react类,可以自定义组件。里边支持jsx语法,通过props和state传参/维护状态。

    其他插件,比如Router/Redux都是围绕着扩展/修改react对象里的属性来添加功能的

    1.准备工作

           可以在yunp.top网站看webpack,node/npm,cnpm的相关使用视频教程

           react有两种使用方式,一是在现有网站中添加;二是创建一个全新的

      官网创建全新一个react app步骤

        1.npx create-react-app my-app

      2.cd my-app

      3.npm start   

      (待定,熟悉react项目里的文件作用与架构)

    2.JSX语法

      1.react类

      2.react-dom类

    react-dom.render方法:两个参数。第一个是JSX语法写的标签(不是字符串或者对象),第二个是要插入的根容器标签

    JSX语法:JavaScript + XML(HTML)结合形成的标签,包含了二者,可以在标签里直接用户js变量。遇到<>当XML语法解析,遇到{}当js语法解析

    3.React元素渲染

     ():代表存在标签结构,并且标签结构要换行

     所以可以用()代表一个要被渲染的元素,赋给一个变量,直接传到render方法里

    ele = (<div>

    hello react

    </div>

    ReactDOM.render(el, ...)

    4.React创建组件

     组件文件后缀,jsx(有提示)或者js

    要引入react库才能创建组件

    创建组件两种方法:类和hook

    类方式:

    class a extends react.Component{

          render(){

        return <h1>hello react</h1>
      }

    }

    引用的时候,用<a />标签形式

    5.组件Props属性

    为组件复用

    使用组件的时候,给组件标签属性赋值<Home navi={变量名}>(加花括号是因为这是jsx语法,navi=“数据”也行)

    组件内部,通过this.pros.navi

     props不可以被修改

    6.事件处理

    传统的方式,用双引号包起来的函数名改用{} 来包起来

     <a href="#" onClick={handleClick}>

    类的方法默认不会绑定this,在类方法里使用this会未定义

    三个办法解决:

    1.调用bind方法

    this.handleClick = this.handleClick.bind(this);

    2.属性初始化语法

     handleClick = () => {
        console.log('this is:', this);
      }

    3.绑定的时候用lambda包起来

    <button onClick={(e) => this.handleClick(e)}>

    事件响应函数里加参数

    两个办法

    1.<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
    2.<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
    

    7.组件状态

     组件的状态用state属性存储

    读:this.state.状态名

     改变用this.setState({状态名:this.state.count 【operation】})方法

     状态是为了不直接操作dom,在JSX里使用而提出的,面向数据,而不是DOM编程

    8.组件生命周期函数

     componentWillMount:在组件渲染之前执行

     componentDidMount:在组件渲染之后执行

    shouldComponentUpdate:是否应该更新

     componentWillUpdate:数据修改之前

    componentDidUpdate:数据修改之后

    componentWillReceiveProps:props发生改变时执行

    componentWillUnmount:组件卸载前执行

     9.组件类的构造函数

    constructor(props){

      super(props);

      this.state={count:10}//初始化state对象

    }

     10.props可以接受函数做属性,子组件可以调用回调到父组件方法,改变父组件的属性

     11.setState可控的时候异步执行,不可控的时候同步执行

     setState第二个参数是回调函数,在修改成功后调用

     同步写法要结合Promise,async,await

     12.条件渲染

    1.视图切换;2.默认缺省值

    ? : 来放不同的JSX标签

     13. 列表渲染 & key

    <li>标签要有个key属性,即为map里的{index}

     key的作用是局部刷新

     14.表单受控组件

    value的值通过state管理;非受控的自己搞dom管理

    受控的,要给onChange事件设置响应函数,在响应函数里setState为e.target.value

    事件.preventDefault:阻止提交改变网址

    15.Refs & DOM

    适用refs的情况

    1.管理焦点,文本选择或媒体播放

    2.触发强制动画

    3.集成第三方dom库

    通过React.createRef创建ref对象

    ref.current既是当前DOM结点

    16.表单非受控组件

    当状态太多了,就不想自己管理状态。用非受控组件

    通过current.value获取表单的值

    17.状态提升:

    父子组件间交换数据

     把数据放在父组件,再通过props给子组件

     18.组件组合

     props.children获取组件标签下的子组件。在render函数里渲染的时候引用输出。

    这种情况是在引用组件的时候,把其他组件或者标签放在组件里边

     19.PropsType进行乐行检查

     增强健壮性

    要求组件的propTypes属性指定相应props的类型,比如propTypes = {title:PropTypes.string},PropTypes.string.isRequired代表这个属性一定要传

    defaultProps对象指定相应属性默认值

     20.ANTD UI

    npm install后,引入相应组件,及其css或者less文件

    根据官网文档使用,可以设置相应属性,尤其是回调函数

    21.ANTD按需加载,引入js自动引入css

    1.js与css单个文件导入 

    2.按照babel-plugin-import插件,配置antd

    npm run eject(拉取webpack 配置)

    安装插件,配置插件

    22. Fetch get请求

     fetch基于promise

    fetch(url).then(res => {}).then().catch() ...,默认get

    23.Fetch post请求

    fetch(url, {method: "post", headers:{}, body:"body字符串",...})。body可以用querystring库(stringify方法)来处理

     24.配置package解决跨域问题

    开发环境:利用环境解决

    生产模式:jsonp cors iframe postMessage

    在package.json文件里,添加

    "proxy":url字段

    fetch的时候,可以不带url主机地址了

    25.手动配置解决跨域问题

    安装http-proxy-middleware

    新建setupProxy.js,安装模板,修改目标网址 

    26.封装网络请求 

    api目录下 :

    base.js:公共数据,配置

    index.js:对外接口

     util目录下:

     封装fetch

    27.React Router

    安装:npm install react-router-dom --save

    引入BrowserRouter,Switch,Route,Link   对象

    使用Route标签,引入路径和组件的映射

    <Route path="/home" compontent={Login}/>

    每个Route标签,要被BrowserRouter标签包起来

    这样就配置好了,在浏览器里输入/home,就跳到Login组件页面 。浏览器地址栏没有被映射的path,就不会显示相应的组件,即默认不显示相应的被映射的组件,一定要有个地方引用到这个path才可以,Route标签仅仅是为了占位,path被点击到了这个位置就显示

    28.BrowserRouter和HashRouter区别

    锚点记录与history push实现(需要后台处理重定向,否则404)

    29.Link跳转

    <Link to=path />,生成跳转标签。to还可以用对象配置

    30.exact匹配

    Route标签,父组件的exact={true}或者直接exact,表面不会显示路径里的父组件

    31.strict匹配

    Route加strict属性,表明地址里最后有个/也不匹配。必须和exact一起使用

    32.组件可以直接倒出一个lambda匿名函数,里边render 

    33.Switch和404

    Switch里面 放个Route,不配路径,全匹配。这样路径匹配不到,就显示这个组件

    有了Switch标签,只会匹配一个,第一个匹配到的

    34.render func

    直接在Route标签里设置,render={lambda} 

    35. NavLink高亮

    选中后高亮标签,class为active。可以通过属性activeClassName改变class名称。属性activeStyle指定具体样式

    36.URL参数

    定义路由的时候,加/:id,在使用的时候,用props.match.param.id获取。/:id代表,表明参数可有可无

     37. query string读取参数

    &分隔的在props.location.search里,待用URLSearchParams.get(key)来获取

    或者用querystring.parse获取

    38.Link的to属性

    search添加&格式的参数,hash添加hash后缀,state为隐形参数,不在网址上暴露。props.location里包含这几个属性

    39.重定向

    不同路径,同一个页面

     <Redirect>标签from知道src,to指定dst

    40.重定向push和replace

    使用props.history的push和replace方法进行页面跳转

    41.withRouter

    这是一个高阶组件

    组件想被Router管理,获取props里相应的Router对象,导出的时候可以用withRouter(组件)的格式

     42.Prompst

    类似状态守卫,在某个状态的时候弹出文字,属性when是状态,message是提示文字

    43.路由嵌套

     在父组件里,通过props.children显示被嵌套进来的子路由组件。即组件组合的情况

     44.redux介绍

     redux是一个Javascript状态容器,提供可预测化的状态管理

    传统状态共享:

    props,回传事件

    兄弟之间共享:共同的父/子元素

    45.Boot CDN加载

    取boot cdn这个网站搜

    46.引入Redux

    npm install --save-dev redux,或者npm install --save-dev react-redux。这二者一个是给js用的,一个是给react封装好使用的

    Ruedx通过reducer定义,存储状态。外界通过dispatch action改变state,通过getState获取状态

    1.从redux引入createStore

    2.定义reducer,为一个函数,有两个参数,state和action

    3.createStore(reducer)创建store

    4.store里的dispatch分发,参数是一个对象,{type:"Incremeant", }

    5.store还有getState和subscribe,通过subscribe返回的函数注销监听器

    目前一个store只有一个state

    47.mapStateToProps

    用<Provider>标签包住要渲染的标签,提供其store属性为createStore返回值

    被包住的组件,要使用connect对象,用高阶组件的形式export connect()(组件)

    connect里的参数,可以是个lambad函数,将state映射到counter,返回一个对象,key为props名value为state值,这样在this.prpos.key就可以读到了

    45.dispatch

    connect的第二个参数是mapDispatchToProps,一个lambda函数,返回的对象是动作到方法的映射。通过传进来的dispatch参数,调用自定义方法

    这样props里,就有了相应的方法。

    dispatch的是action,里面包含了给reducer的各种参数

    46.bindActionCreators

    在dispatchToProps里通过给binderActionCreators传参,参数是导入的*和dispatch,即可一次导入,这样直接引用props.key即可

    47. 传参给reducer,可以在action对象里拿到。action方法里返回的是一个对象

    48.combineReducers,合并reducers

    把reducer扔进combineReducer,要使用引用的话,加一层,props里state.reducer来引用

    49.中间件

    引入appMiddleware

    createStore第二个参数即是appMiddleware,里边自定义lambda函数。

    这是一个截获过程,可以获取执行过程中的状态。所以要有骨架,执行返回正常流程

    中间件名 = store =>  next => action =>{

         result = next(action)

         return result

    }

    50.logger中间件

    npm install --save-dev redux-logger

    可以打印整个过程里的action,state,并且带颜色

    50.第三方thunk中间件

    thunk中间件负责异步

    npm install --save-dev redux-thunk安装

    有了这个中间件,可以在timeout里调用dispatch 

    thunk另一个异步作用是网络请求

    网络请求后调用dispatch

    thunk请求三种状态

    1.请求中

    2.成功

    3.失败

    state操作三大原则:

    state是只读的

    52. 调试工具

     chrome安装插件

    React Developer Tools

    Redux DevTools

    需要安装依赖,npm install --save-dev redux-devtools-extension

    使用的时候,传参给createStore第三个参数位;或者composeWithDevTools包裹插件传进第二个参数位

    53.React进阶-组件优化

    1.定时器,网络请求,事件监听,在组件销毁前要取消

    2.shouldComponentUpdate两个参数,nextProps,nextState,可以用来判断和当前的值是否一致,决定是否渲染

    3.PureComponent,对数据进行浅比较。比较props,变化才渲染

    54.Fragment

    Fragment标签,用来占位,防止没有root对象

    55.Context

    组件第一个参数是props,第二个是context。父组件设置context,下面多层的子组件可以直接使用

    父元素实现函数getChildContext返回键值对

    父元素设置childContextTypes

    子元素设置conTextTypes

    56.高阶组件

    1.是个函数

    2.参数一个组件

    3.返回值一个组件

    在对传入的组件进行一次加工

    高阶组件定义()=》(){}

    使用,()()

    57.错误边界处理

    一个组件出错,仅仅这一个组件不显示出来

    定义一个组件,componentDidCatch,参数为error,errorInfo

    用这个组件包住可能出现错误的组件

    58.新特性 state hook

    hook:不写class的情况下去操纵state和其他数据

    直接写个function,return一个jsx语法

    可以 export default () =>{}直接导出

    要使用state,

    1.import useState

    2.定义一个数组, [count,setCount] = useState(0)//0表示默认值

    3.直接使用count和setCount,不用this

    可以看到,简单了很多

    59.Effect Hook

    useEffect代替生命周期函数

    有三个:componentDidMount.componentDidUpdate,componentWillUnmount

    useEffect传入箭头函数即可。

    useEffect第二个参数是个数组,[]代表映射componentDidMount。没有第二个参数,代表componentDidMount,componentDidUpdate.

    useEffect直接返回代表componentWillUnmount

    [count]代表只有count更新,才会调用componentUpdate

    60.hook使用好处

    可以返回一个对象, 里边是相应的值和事件响应函数

    使用的时候,{...hook返回值}即可

    awesome react hooks可以找到很多这种常用代码段,方便复用

    61.useEffect优化

     在回调函数里判断属性是否改变,决定是否渲染

    62.网络请求hook下

    可以用async await来做,封装为一个lambda

    63.hook使用规则

    不要在循环,条件,嵌套函数里使用hook

    hook函数(userEffect,useStatge必须在顶层,所有的东西在他里面)

     64.componentWillUnmount

    return的时候做收尾工作,return一个lambda

     65.memo

     memo是个高阶组件,对于hook形式的组件,放进去再返回即可。和PureComponent一个作用

    66.useCallback优化

     包裹住回调函数,只在第二个参数变化的时候调用(除了第一次回调)

    67.useReducer

    通过useReducer返回state和dispatch,改变state通过调用dispatch

    68.useContext

    React.createContext创建context

    子组件用创造context.Provider标签,指定value

    子组件可以使用useContext(context)来获取

    69.contextType

    使用useContext后,子类指定statci contextType,就可以直接用this.context

    70.setState

    可以传一个lambd函数,prevState和props为参数

    合并所有的异步执行,异步执行完毕后执行回调函数

    y

  • 相关阅读:
    命令拷屏之网络工具
    PHP 设计模式 笔记与总结(1)命名空间 与 类的自动载入
    Java实现 计蒜客 1251 仙岛求药
    Java实现 计蒜客 1251 仙岛求药
    Java实现 计蒜客 1251 仙岛求药
    Java实现 蓝桥杯 算法训练 字符串合并
    Java实现 蓝桥杯 算法训练 字符串合并
    Java实现 蓝桥杯 算法训练 字符串合并
    Java实现 LeetCode 143 重排链表
    Java实现 LeetCode 143 重排链表
  • 原文地址:https://www.cnblogs.com/cascle/p/12090686.html
Copyright © 2011-2022 走看看