为了账号安全,请及时绑定邮箱和手机立即绑定
  • React 避免 Dom 操作,主要是面向数据操作:

    定义 state (组建中存放数据的地方)

    constructor( props ){

        super ( props );

        this.state.list [

            ......

        ]

    }

    然后在视图标签中的写入 { js 表达式(用 map 循环定义中的数据)} 

  • 一、代码优化

    1、在构造函数中做好this指向的改变

    <!--此处有图片-->下面就不用.bind(this)

    <!--此处有图片-->

    可以改变代码的执行性能

    2、解构赋值

    <!--此处有图片-->

    3、解决render函数中代码过长

    <!--此处有图片-->

  • 关于 js 中 this 的难点参考~https://www.cnblogs.com/long-long/p/6741083.html

  • 知识点总结:

    1. react 组件都是以大写字母开头,组件就是一个类然后继承 React.Component,就是一个react组件,react 组件中必须有一个 render

    2.  jsx: 直接在js中写 html 标签,也可以在在 {} 中写 js 表达式(不能写 js 语句);

    3. react 中的 return 只能返回一个 jsx 也就是说只能有一个父标签;

    4.  父组件通过属性的形式向子组件传递参数,子组件通过 props 接收参数;

    5. 由于每一个组件中必须有一个根元素,但是处于一些原有不想让其表露出来时,可以用 <React.Fragment></React.Fragment>代替;

    6. 简化代码:将jsx 中的 js集中部分单独作为一个函数;在顶部引入

      import React, { Component, Fragment } from 'react',便可以将后面代码中的  React.Fragment 简化为 Fragment(此标签中不能带类名) ,React.Component简化为 Component;在函数中定义 const {handleDelete,index} = this.props 以后,使用 handleDelete 就相当于 this.props.handleDelete;

    7. 一般 bind(this) 写在 constructor 函数中更规范。


  • 父组件通过属性的形式向子组件传递参数,

    子组件通过props接受父组件传递过来的参数

  • 什么是组件: 可复用的代码模块,其实也就是可复用的代码片段。

    组件允许我们将应用的UI拆分成独立的、可复用的模块,其实也就是可复用的代码片段。React应用程序就是由组件来构建的,也就是说React应用的基石!

    只要是页面上的一部分我们都可以把它理解成一个组件

    组件就是网页上的有部分

    在react中以大写字母开头的都是组件

    ReactDOM就是为了便于我们把组件挂载(渲染)到dom元素上

    组件就是类

    自定义的一个组件必须要继承react的组件 即React.Component 才能变成react的一个组件

    render负责的就是当前组件要显示的内容

    组件定义完成之后要导出出去,便于其他组件导入引用

    export 和 import 是配对使用

  • React是一個基於組件開發的框架。

    組件指的是網頁上的一部分,只要是頁面上的一部分,都可以理解為組件。如網頁整體上是一個大的組件,Logo可以拆分成一個小組件,搜索區也是一個組件(裡面還可以拆分成一個輸入框組件和一個按鈕組件)。

    App就是最外層的一個組件,在React中,以大寫字母開頭的都是組件

    index.js是一個入口文件:

    引入了react庫,在於可以了解React的語法

    引入了react-dom,在於讓組件可以掛載到頁面上一個document節點上,把一個組件渲染到dom上。

    引入了App.js,App.js裡面的代碼一定是在定義一個React組件。它是一個類,必須要繼承在React庫裡面引入的一個Component的類。React一個組件裡面,必須有一個render函數,負責這個組件要顯示的內容。export default app將其導出。



  • React原理:

    之所以頁面上能展示這個頁面,是因為項目裡面一定會有頁面相關的代碼,代碼放在src目錄下。

    React執行的入口文件是src/index.js,是整個程序的入口

    引入了:react, react-dom, App.js, registerServiceWorker, App.test.js

    registerServiceWorker是一個pwa,也就是離線頁面的一個內容

    .css是樣式文件

    App.test.js是做自動化測試的時候會用到的一個文件

    App.js裡面顯示了網頁div裡面的代碼

  • react 是面向数据编程

    更改数据用 this.setState()

  • 用户定义的组件必须以大写字母开头

    以小写字母开头的元素代表一个 HTML 内置组件
    比如 <div> 或者 <span> 会生成相应的字符串 'div'或者 'span' 传递给 React.createElement(作为参数)。

    大写字母开头的元素则对应着在 JavaScript 引入或自定义的组件
    如 <Foo /> 会编译为 React.createElement(Foo)。
    我们建议使用大写字母开头命名自定义组件。如果你确实需要一个以小写字母开头的组件,则在 JSX 中使用它之前,必须将它赋值给一个大写字母开头的变量。


  • 温馨提示:使用箭头函数以避免在标签内部或者constructer内部bind(this)的繁琐操作,示例代码如下:

    handleDelete = ()=>{

        your code

    }


  • index.js 是入口,引入React帮助我们理解语法,ReactDOM可以帮我们把组建渲染到组件上,App是一个组件,App.js就是一个组件

    定义组件:class 名称 extends React.Component   显示的内容是render函数里面的return的内容 

    export default 名称 是导出  这样子其他地方才可以导入

    07:53
    看视频
  • React

    1. 大写字母开头的名称都是组件  

    2. 引入react为了理解组件的相关语法

    3. 引入reactdom为了让组件渲染到HTML文件的标签中 

    4. 组件的的创建:

        class 组件名  extends  Component{

          render(){                       //必有函数,负责要显示的内容

              return(

                   要显示的内容

               ); }}

    5. index.js是入口;App.js是组件的定义

  • <React.Fragment></React.Fragment>可代替根元素 <div></div>

  • React 中规定在循环标签的时候,标签内要添加 key 属性,且 key 值不能一样,所以一般值设为循环项的索引值

首页上一页1234567下一页尾页

举报

0/150
提交
取消
课程须知
1、对Javascript基础知识已经掌握。 2、对Es6和webpack有简单了解。
老师告诉你能学到什么?
1、React项目架构搭建 2、JSX语法 3、React组件化开发 4、React组件间通信 5、React中的事件 6、React代码优化 7、React中组件的样式修饰

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!