为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【九月打卡】第12天...

【九月打卡】第12天 React零基础入门到实战,完成企业级项目简书网站开发 第三讲

2022.09.18 23:03 57浏览

课程章节: React基础精讲

主讲老师: Dell

课程内容:

今天学习的内容包括:
1.render函数中,js的语法必须用大括号涵盖

2.react中构造函数中的this.state用来填写属性,类似vue中的data

3.react中注册的事件通render函数同级并列,通过this来调用对应函数,但是this在未改变上下文this指向时,指向的是undefined,我们要通过给注册事件的函数通过bind(this)来改变this的指向,此时的this表示的是当前的这个组件

4.react中没有双向数据绑定,只能通过数据层上传数据到视图层,我们可以通过onchange事件来监听对应视图层的值的变动,通过this.setState来改变对应的state中的数据

课程收获:

3.1 心得:

页面 的基本格式

class  ****  extends Component{
    render(){
            return{  <占位符>  内容区  </占位符> }        
    }

}

render函数return返回的内容必须采用Fragment占位符,包裹在最外层,外层标签才会隐藏掉;或者最外层采用div,但是这个时候外层标签不会被隐藏

实例代码:

import React,{ Component,Fragment } from 'react';
class TodoList extends Component {
 render(){
  return (
   <Fragment>
    <div><input /><button>提交</buttn></div>
    <ul>
     <li>学英语</li>
     <li>Learning React</li>
    </ul>
   </Fragment>
  )
 }
}
export default TodoList;

3.2 心得:

在class类中,constructor(props)函数优先于所有函数执行。

super(props)是继承父类Component,固定写法。

React中定义数据,要把数据定义在状态里,即this.state

React中想改变state中的数据,通过this.set State函数,传入对象,对某个数据项进行变更

定义数据:

constructor(props){ // 构造函数 优于其它函数,最先执行

    super(props); // 调用方法

    this.state = { //定义数据 定义在状态state里

        inputValue: '', // 定义数据

        list: []    // 定义数组

    }

}

react中不用直接操纵DOM,操纵数据即可。

constructor( )为构造函数,优先被执行。

super(props)是继承父类,固定写法。但是目前在最新版的create-react-app中,应该写成super( ),括号里不能是props或this.props,会报错。

react中的数据要定义在状态中,也就是this.state中。

在JSX中,事件绑定要用驼峰形式命名,如:onchange->onChange

记得改变this指向。

改变state中的数据,用setState。

e.target是指的对应组件的DOM节点。

this指向问题解决

  1. 赋值语句+箭头函数

如:

handler = (e) =>{
    console.log(e.target)
}
//将一个函数赋给handler,这个函数是箭头函数。
//由于箭头函数自身没有this,在箭头函数内部使用this会引用定义箭头函数时的上下文。
  1. bind()
 handle(e) {
    console.log(e.target)
}
...
onChange = {this.handle.bind(this)}

constructor( )是最先被执行的函数
super(props)调用父类的构造函数一次,在这里是:Component
定义数据,存储在状态里面 this.state = { }
然后将后面需要用到状态里的数据的地进行绑定,例如:<input value={this.state.inputValue} />

3.3 心得:

绑定事件时,事件首字母必须大写

[...展开运算符] 拷贝

const list = [...this.state.list]

list.splice(index,1) //将下标为一的数据删除,删除一项

immutable

state 不允许我们做任何的改变 因为改变之后后面性能优化会出问题

list:[…this.state.list,this.state.inputValue]
…展开运算符
this.handleItemDelete.bind(this,index)
bind可以增加传递参数
handleItemDelete(index){}

3.4 心得:

1:文本注释 {/* 这是注释内容 */}

2:类名用className,而不是以前的class

3: 如果希望内容原样输出,标签或者符号不被转义,可以使用dangerouslySetInnerHTML属性,语法为:dangerouslySetInnerHTML={{__html: item}}

4:扩大文本输入的光标聚焦,实现点击前面文字输入框即可聚焦,label标签添加一个htmlFor指向后面跟着input的id

jsx中如何写注释:

{/*注释*/}

单行注释需要换行

{

//注释

}

dangerouslySetInnerHTML = {{__html: item}} //让某些标签里的内容不被转义

<label >扩大点击区域</label>

为避免for-loop的for产生歧义,将for改为htmlFor

<label htmlFor="xxx">点击</label> //点击之后光标聚焦到xxx

3.5 心得:

1.父组件向子组件传递数据:
父组件通过’属性’传值给子组件,组件通过’this.props.父组件属性名’获取传来的值

2.子组件调用父组件方法以及修改内容:
在复杂的组件开发中’this.方法名.bind(this)'替换成在构造函数中编写’this.方法名=this.方法名.bind(this)'
父组件可传父组件中的方法给子组件,子组件通过this.props.方法名来获取该方法,以及获取父组件的传参等

render() {
   // return <div>item</div>  造成传递过来的信息堆积,树形结构

   // 父组件向子组件传递数据
   //return <div>{this.props.content}</div>
   return (
       <div onClick={this.handleClick}>
           {this.props.counter}>
       </div>)
}

3.6 心得:

1.为了不影响网页性能,所以把this绑定写在constructor函数里面,this.方法名=this.方法名.bind(this),后面直接使用this.方法名

2.渲染标签可以写在一个自定义的方法里面,然后再在相应的地方调用该方法,{this.方法名()}

3.this.setState的新版函数简写方式:this.setState((prevState) => ({这里写赋值的数据和内容}));注意:用该方式写setState时,赋值的数据要先定义在外面,不然页面会报错;'prevState’等价于this.state

3.7 心得:

react 是声名式开发,react 根据数据来构建网站,大量节约 dom 的操作。

react 可以与其他框架并存

react 是组件式的开发。父子组件传值(面试经常被问),这个要非常熟练

单向数据流,父组件是 todolist,父组件可以向子组件传递内容,但是子组件只能使用,不能直接地改变这个值。是为了开发起来方便。如果子组件真的要改,需要父组件传递 f 给子组件,所以实际还是父组件进行的修改。维护代码就方便多了

react 定位为视图层框架。你看下图,如果紫色的子组件,想要给右侧那个灰色球通信,怎么办?紫色要一遍遍网上传,非常复杂。所以在做大型项目的时候,光有 react 不行。还需要其他数据层框架来辅助开发。
图片描述

图片描述

图片描述

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消