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

课程名称： React零基础入门到实战，完成企业级项目简书网站开发

课程章节： 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会引用定义箭头函数时的上下文。

2. 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 不行。还需要其他数据层框架来辅助开发。