为了账号安全,请及时绑定邮箱和手机立即绑定
  • 一、代码优化

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

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

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

    可以改变代码的执行性能

    2、解构赋值

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

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

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

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

  • React 避免 Dom 操作,主要是面向数据操作:

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

    constructor( props ){

        super ( props );

        this.state.list [

            ......

        ]

    }

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

  • 知识点总结:

    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接受父组件传递过来的参数

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

    以小写字母开头的元素代表一个 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 值不能一样,所以一般值设为循环项的索引值

  • 什么是 jsx 语法?

    在定义的组件中:

    1.可以直接返回视图标签不报错。

    2.外层必须要有一个根标签包裹着

    3.根标签内部可以写 js 表达式,会自动编译,js 语句会报错

    4. index.js 中 render 中引用组件时,组件名写在标签符号内。

  • 首先,index.js他是一个入口,首先他引入了react,帮助我们去理解app开头的组件,又引入了reactdom,帮助我们将组件渲染到一个root节点上。结尾的export default app是将其导出,这样,在index.js中才能将他再导入进去,导出和导入是配对使用的。

    而app就是一个组件,她在app.js当中定义,首先,需要定义一个APP的类,她继承react.component.

    当一个类集成了react.componet后他就是react中的一个组件,react 组件中必须有一个函数叫做render,这个函数负责这个组件要显示的内容,并且这个函数会return一个内容,他return回去的内容就是这个组件要 显示的内容

  • constructor(props){
        super(props);
        this.state={
            list:[],
            inputValue:'' //清空
        }
    }
    //2.当点击提交时,列表添加
    handleBtnClick(){
        this.setState({
            list:[...this.state.list,this.state.inputValue],
            inputValue:'' //清空
        });
    }
    //1.先执行输入框的监听事件,当值改变时监听
    handleInputChange(e){
        this.setState({
            inputValue:e.target.value //获取input框的值
        })
    }
    render() {
        return (
            <div>
               <div>
                   <input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}/>
                   <button onClick={this.handleBtnClick.bind(this)}>add</button>
               </div>
                <ul>
                    {/*表达式*/}
                    {
                        this.state.list.map((item,index)=>{
                            return <li key={index}>{item}</li>
                        })
                    }
                </ul>
            </div>
        );
    }


  • react 操作数据,不需要操作dom ;
    在react 中操作 state中的数据,尽量不直接操作state的数据,而是拿一个变量接收后,再操作该变量
    如删除函数 

    handleItemClick (index){

        const newList = [...this.state.list];  // 拿newList接收 state中list的值

        newList.splice(index,1); //删除newList中de 该 index的值

        //将删除后的数组放置在state中,

            this.setState({

                list:newList

            })

    }


        



    05:15
    看视频
首页上一页1234567下一页尾页

举报

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