kerwin老师我来了
类组件的创建
class组件，js里的类命名首字符大写，类里面包括构造函数，方法
组件类要继承React.Component才有效
必须包含render方法
javascript
import React from 'react'
class App extends React.Component{
render() {
return <div>hello react Component</div>
}
}
export default App在index.js里引入并使用标签，就算使用一个类组件了
组件返回的内容必须是封闭的，必须包括在一个完整的标签里
react16.8之前函数组件又叫无状态组件，在之后引入了hooks，函数式组件就有了状态
组件的嵌套
一个页面里只有一个根组件
声明三次组件
javascript
import React, { Component } from "react"
//export {Component},es6的模块化导出，也就是之前说过的默认导出，命名导出
//声明类组件
class Navbar extends Component {
render() {
return <div>navbar</div>
}
}
//声明函数组件
function Swiper() {
return <div>Swiper</div>
}
//箭头函数组件
const Tabbar = () => <div>Tabbar</div>
class App extends Component{
render(){
return (
<div>
<Navbar></Navbar>
<Swiper></Swiper>
<Tabbar></Tabbar>
</div>
)
}
}
export default App
这样直接在子组件里再写子组件是显示不出来的，其实这种方式也是可以实现爷孙嵌套的，但是先不讲
javascript
class App extends Component{
render(){
return (
<div>
<Navbar>
<Child/>
</Navbar>
<Swiper></Swiper>
<Tabbar></Tabbar>
</div>
)
}
}如果想体现Child是Navbar的子组件，需要单独写一个Child，然后在Navbar里调用：
javascript
import React, { Component } from "react"
//export {Component},es6的模块化导出，也就是之前说过的默认导出，命名导出
const Child = function () {
return <div>Child</div>
}
//声明类组件
class Navbar extends Component {
render() {
return <div>navbar
<Child></Child>
</div>
}
}
//声明函数组件
function Swiper() {
return <div>Swiper</div>
}
//箭头函数组件
const Tabbar = () => <div>Tabbar</div>
class App extends Component{
render(){
return (
<div>
<Navbar>
<Child/>
</Navbar>
<Swiper></Swiper>
<Tabbar></Tabbar>
</div>
)
}
}
export default App这样就好了，还可以体现Navbar和Child的父子关系
组件的样式
{}里的内容当js处理
样式的两种处理：行内样式，使用class，给dom添加className
之所以可以把外部的css等模块直接导入，免不了webpack的支持，webpack把导入的样式模块转化为内部的style样式
而脚手架把webpack封装了
jsx里，for是js的保留字，在react的现版本更推荐htmlFor
当用户点击<label>时，浏览器会查找和for属性匹配的id，把焦点设置到input控件上
javascript
import React, { Component } from "react";
class App extends Component {
render() {
return (
<div>
<label htmlFor='username'>用户名：</label>
<input type='text' id='username' />
</div>
);
}
}
export default App;react里更推荐行内样式
React 推荐我们使用行内样式，因为 React 觉得每一个组件都是一个独立的整体
这个地方不能加小括号，是回调函数，加了小括号就会立马执行
javascript
<button onClick={this.handleClick()}>add2</button>并且这个时候onClick={},{}里面是函数的返回值，如果里面的函数加了小括号，就会执行并且把返回值赋给onClick，如果里面的函数没有返回值，就是undefined
开启this大战
javascript
import React, { Component } from "react"
class App extends Component{
a=100
handleClick2() {
console.log('onclick2',this.a)
}
render(){
return (
<button onClick={this.handleClick2}>add2</button>
</div>
)
}
}
export default App希望可以通过点击事件回调函数的this获取App里的a
失败了孩子们 
我们来看看this是谁：
为什么是undefined呢孩子们，谁调用this指向谁，点击以后执行，是react的事件系统调用的，指谁也指不到App啊，a是App里的属性，所以也就获取不了a了
总之就是this指向出问题了，怎么修正this指向呢？以前我们在js里学了好几个更改this的方法，比如bind()、apply()、call()
javascript
<button onClick={this.handleClick2.bind(this)}>add2</button>
//不推荐这种写法成功了孩子们
问题又来了：为什么是bind()呢？因为call和apply会自动调用函数，而回调函数不需要立马调用，且apply用于数组
如果想获取App的属性，可以直接用箭头函数：
javascript
import React, { Component } from "react"
class App extends Component{
a=100
handleClick2() {
console.log('onclick2',this.a)
}
handleClick3 = () => {
console.log('onclick3',this.a)
}
render(){
return (
<div>
<input type='text' id='username' />
<button onClick={this.handleClick3}>add3</button>
//比较推荐这种写法
</div>
)
}
}
export default App因为箭头函数会引用上个作用域的this，在这里就是App，所以可以打印App的属性
在里面也使用箭头函数和this调用
javascript
<button onClick={() => {
this.handleClick4()
//可以传参，比较推荐
}}>add4</button>
handleClick4 = () => {
console.log('onclick4',this.a)
}里面的this和外面的this是一样的
事件处理
React并不会真正的绑定事件到每个具体的元素上，而是采用事件代理的模式
React 在应用的根节点（通常是 #root 或 #app）上监听所有支持的事件（如 click、``change 等）事件发生时，React 会根据事件的 target（触发事件的元素）找到对应的组件，并调用组件中定义的事件处理函数，通常在冒泡阶段处理事件，也就是点击按钮时，事件冒泡到根节点，React 调用 handleClick执行。
优点是性能优化，减少内存占用、封装了浏览器的事件系统、在组件卸载时自动移除事件监听器，避免内存泄漏
关于事件对象e
和普通浏览器一样，事件handler会被自动传入一个 event 对象，这个对象和普通的浏览器 event 对 象所包含的方法和属性都基本一致。不同的是 React中的 event 对象并不是浏览器提供的，而是它自己内部所构建的，也就是一个合成事件e，它是 React 对浏览器原生事件对象的封装。它同样具有 event.stopPropagation 、 event.preventDefault 这种常用的方法
ref
ref是引用的意思
用一种古旧的方法（react目前已不支持refs访问dom元素或组件了）获取标签：
javascript
import React, { Component } from "react"
class App extends Component{
a=100
render(){
return (
<div>
<input ref='mytext' />
<button onClick={()=>{console.log('click1',this.refs.mytext)
}}>add1</button>
</div>
)
}
}
export default App这就代表我们获取到这个元素了，获取这个元素以后也可以获取他的属性
新的写法是这么写的：
javascript
import React, { Component } from "react"
class App extends Component{
a=100
myref=React.createRef()//返回一个ref对象
render(){
return (
<div>
<input ref='mytext' />
<input ref={this.myref} />
{/* //把ref绑定在input上 */}
<button onClick={() => {
console.log('click', this.myref)
}}>add1</button>
</div>
)
}
}
export default App
获取到的是一个对象，原生dom节点被放在ref的current属性里
注意在类组件里要一直注意this指向的问题
状态
在我还没有学react的时候，我以为这样就可以切换按钮内容了
javascript
import React, { Component } from "react"
class App extends Component{
render() {
let text = '收藏'
return (
<div>
<button onClick={()=>text = '取消收藏'}>{text}</button>
</div>
)
}
}
export default App实则不然，在react内部并不知道你改变了它，不会渲染，需要用状态来管理
React里我们要尽量减少对dom的操作，因为react内部已经在做dom操作了，你只需要告诉他你要什么
状态可以满足我们不改变dom，通过数据来操作页面的要求
javascript
import React, { Component } from "react"
class App extends Component{
state = {
show:true
}
render() {
return (
<div>
<button onClick={() => {
this.setState({
show:!this.state.show
})
}}>{ this.state.show?'收藏':'取消收藏'}</button>
</div>
)
}
}
export default App类组件更像是在用面向对象的思想编程
除了这种写法还有这样设置状态的写法
javascript
constructor() {
super()
this.state = {
name: 'React',
isLiked: false
}
}super() 用于调用父类（React.Component）的构造函数，保证this正确指向组件实例
列表渲染
写写类组件的列表渲染
javascript
import React, { Component } from "react"
class App extends Component{
state = {
list: [
{
id:1,text:'111'
},
{ id: 2, text: '222' },
{id:3,text:'333'}
]
}
render() {
return (
<div>
<ul>
{this.state.list.map((item) => <li key={item.id}>{ item.text}</li>)}
</ul>
</div>
)
}
}
export default Appkerwin老师对key的解析：
Diff 算法 是 React 用于比较虚拟 DOM（Virtual DOM）更新前后差异的核心算法。它的目的是高效地计算出需要更新的部分，从而最小化对真实 DOM 的操作，提升性能。
对于相同的元素类型，React 会保留该 DOM 节点，只更新变化的属性。
对于不同的元素类型，React 会销毁旧节点并创建新节点。
Key ：为列表中的每个元素提供唯一的 key，帮助 React 识别元素的移动、添加或删除，为了列表的复用和重排，设置key值，提高性能
理想的key是数组里的对象，item.id是对象里的一个属性（最好不要拿数组下标，这样删除一个后面的都会乱，不涉及列表的增加、删除、重排是可以设置为索引值的）
tolist制作
添加数据
对于状态的控制和函数组件的useState是相似的，得把更改的结果传入：
javascript
this.state.list.push(this.myref.current.value)不能直接修改状态为了避免直接修改状态，我们可以复制一份修改，然后把新的值赋值回去：
javascript
let newList = this.state.list//这样对吗？显然是不对的，这叫赋值，赋值的本质二者指向的还是同一块内存地址
这时候其实还是相当于直接修改了状态，所以我们要进行拷贝（深拷贝和浅拷贝）
类组件实现的todolist
javascript
import React, { Component } from "react"
class App extends Component{
a=100
myref = React.createRef()//返回一个ref对象
state = {
list: [
{
id:1,text:'111'
},
{ id: 2, text: '222' },
{id:3,text:'333'}
]
}
render(){
return (
<div>
<input ref={this.myref} />
{/* //把ref绑定在input上 */}
<button onClick={this.handleClick}>add</button>
<ul>
{
this.state.list.map((item) => <li key={item.id}>{ item.text}</li>)
}
</ul>
</div>
)
}
handleClick = () => {
console.log('click', this.myref.current.value)
//this.state.list.push(this.myref.current.value)不能直接修改状态
let newList = [...this.state.list]
newList.push({
id:this.state.list.length+1,
text:this.myref.current.value
})
this.setState({
list:newList
})
}
}
export default App删除数据
用bind绑定删除的元素index
javascript
import React, { Component } from "react"
class App extends Component{
a=100
myref = React.createRef()//返回一个ref对象
state = {
list: [
{
id:1,text:'111'
},
{ id: 2, text: '222' },
{id:3,text:'333'}
]
}
render(){
return (
<div>
<input ref={this.myref} />
{/* //把ref绑定在input上 */}
<button onClick={this.handleClick}>add</button>
<ul>
{
this.state.list.map((item,index) => <li key={item.id}>{ item.text}<button onClick={this.handleDel.bind(this,index)}>delete</button></li>)
}
</ul>
</div>
)
}
handleClick = () => {
console.log('click', this.myref.current.value)
//this.state.list.push(this.myref.current.value)不能直接修改状态
let newList = [...this.state.list]
newList.push({
id:this.state.list.length+1,
text:this.myref.current.value
})
this.setState({
list:newList
})
}
handleDel = (index) => {
console.log('del',index)
}
}
export default App其实我决定根据id删除才是更正确的方式
javascript
import React, { Component } from "react"
class App extends Component{
a=100
myref = React.createRef()//返回一个ref对象
state = {
list: [
{
id:1,text:'111'
},
{ id: 2, text: '222' },
{id:3,text:'333'}
]
}
render(){
return (
<div>
<input ref={this.myref} />
{/* //把ref绑定在input上 */}
<button onClick={this.handleClick}>add</button>
<ul>
{
this.state.list.map((item,index) => <li key={item.id}>{ item.text}<button onClick={()=>this.handleDel(index)}>delete</button></li>)
}/*{传递参数让你知道你删除的是第几个}*/
</ul>
</div>
)
}
handleClick = () => {
console.log('click', this.myref.current.value)
//this.state.list.push(this.myref.current.value)不能直接修改状态
let newList = [...this.state.list]
newList.push({
id:this.state.list.length+1,
text:this.myref.current.value
})
this.setState({
list:newList
})
}
handleDel = (index) => {
console.log('del',index)
let newList =this.state.list.slice()//复制
newList.splice(index, 1)//删除
this.setState(//修改状态
{list:newList}
)
}
}
export default App
条件渲染
根据条件渲染
增加一些小功能：清除input，在数组长度为0时显示todolist空空如也
点击按钮控制受控组件的value为0
javascript
handleClick = () => {
console.log('click', this.myref.current.value)
//this.state.list.push(this.myref.current.value)不能直接修改状态
let newList = [...this.state.list]
newList.push({
id:this.state.list.length+1,
text:this.myref.current.value
})
this.setState({
list:newList
})
this.myref.current.value=''
}数组长度为0时，显示暂无待办事项
javascript
//三目运算符
{ this.state.list.length?null:<div>暂无待办事项</div>}
//逻辑短路
this.state.list.length===0&&<div>暂无待办事项</div>}
还有一种方法是让他不满足条件时隐藏，满足时显示,要引入css
javascript
<div className={this.state.list.length===0?'':'hidden'}>暂无待办事项</div>
.hidden{
display:none;
}