202247

defaultProps,propTypes,皆是小写开头。在组件.defaultProps/组件.propTypes的时候。
关于render()的渲染，不管什么时候都是因为props,state的数据发生了变化才会渲染，子组件render()的渲染原理也是这个，而不是单纯因为父组件重新渲染。
当父组件的render()重新渲染时，子组件的render()也会重新渲染。

对于父组件的render()渲染引起子组件渲染，会造成性能损耗，因此需要做性能优化：在子组件利用shouldComponentUpdate()，在子组件生命周期函数中加以判断，
只有特定条件下子组件才更新。

shouldComponentUpdate(nextProps, nextState){
if(nextProps.content !== this.props.content) {
return true
}else{
return false
}
}
//上面代码有点bug

生命周期：父组件render() -> 子组件 shouldComponentUpdate -> 子组件 render()
不管什么时候，父组件render()必然会触发子组件shouldComponentUpdate。
如果子组件的shouldComponentUpdate设置false，那么子组件render()是否重新渲染取决于自身接收的数据是否发生变化了。
这里子组件引用处写的state皆源自于父组件的list，所以list发生改变时，子组件的render()才会重新渲染（这一步是设置shouldComponentUpdate为false
也依旧会渲染的一步)

ajax请求写在componentDidMount()生命周期里。（很简单，写在render()里，每次触发state更新都会重新执行一次请求，这样就陷入了循环了)

react好像要用yarn add，不能用npm install,我用了npm install以后出了问题。
先npm install -g yarn
说yarn的安装速度比npm 快，说实话，没感觉到。

yarn add axios之后：
axios:

import axios from 'axios';
componentDidMount() {
	   axios.get('/todolist')
	   .then(()=>{
		   alert('success')
	   })
	   .catch(()=>{
		   alert('error')
	   })
	}

学会了axios后将学习怎么去模拟一个接口，获取ajax的内容。
安装charles模拟接口。charles官网链接：https://www.charlesproxy.com/latest-release/download.do
这里还有个破解包下载链接：https://www.jianshu.com/p/d0a5e6986445
可以自己去安装，我因为还是在学charles，所以就不装破解版的了，具体charles的简单使用我单独开文章，2022/4/7

箭头函数缩减版：如果只返回数据的话：

() = > (返回的对象)

eg:

()=>({list:[...res.data]})

在css样式中，若显示隐藏并不想被占位的话可以设置opacity

.show {
  opacity:1;
  transition: all 1s ease-in;
}
.hide {
  opacity:0;
  transition: all 1s ease-in;
}

<div className={this.state.show?'show':'hide' } >  

show,hide样式如上。
this.state.show的值为true或false.

this.setState(()=>({
   show: this.state.show? false:true
})

如上，过渡动画transition,动画效果@keyframes

@keyframes例子: @keyframes对应animation

.show {
animation: show-item 2s ease-in forwards;
 }
.hide {
  animation: hide-item 2s ease-in forwards;
}
@keyframes hide-item {
   0%{
    opacity:1;
    color:red;
  }
   50%{
    opacity:0.5;
    color:green;
  }
   100%{
    opacity:0;
    color:blue;
  }
}

@keyframes show-item {
   0%{
    opacity:0;
    color:red;
  }
   50%{
    opacity:0.5;
    color:green;
  }
   100%{
    opacity:1;
    color:blue;
  }
}
//记得要加forwards,否则动画最终效果不会被保存在css中。

新方法：通过react-transition-group 实现动画。！！！！！！！！！
1.首先先安装：yarn add react-transition-group
2.内容
a.transition
b.CSSTransition
c.TransitionGroup
3.引入csstransition

import { CSSTransition } from 'react-transition-group';

使用CSSTransition组件

<CSSTransition>
<div>hello </div>
</CSSTransition>

5.设置cssTransition属性（cssTransition设置unmountOnExit属性便可以轻松实现dom节点的删除）
fade-enter:入场时
fade-enter-active:入场中
fade-enter-done:入场结束
fade-exit：结束时
fade-exit-active：结束中
fade-exit-done：结束完成
fade-appear:第一次出现时
fade-appear-active:第一次出现中

代码：

.fade-enter, .fade-appear {
	opacity: 0;
}

.fade-enter-active, .fade-appear-active {
	opacity: 1;
	transition: opacity 1s ease-in;
}

.fade-enter-done {
	opacity: 1;
}

.fade-exit {
	opacity: 1;
}

.fade-exit-active {
	opacity: 0;
	transition: opacity 1s ease-in;
}

.fade-exit-done {
	opacity: 0;
}

<Fragment>
				<CSSTransition
					in={this.state.show}
					timeout={1000}
					classNames='fade'
					unmountOnExit
					onEntered={(el) => {el.style.color='blue'}}
					appear={true}
				>
					<div>hello</div>
				</CSSTransition>
				<button onClick={this.handleToggole}>toggle</button>
</Fragment>

钩子和生命周期其实意思差不多，它们都指的是某个时刻会自动执行的东西。
onEntered()入场动画结束之后
onEntered={(el) => {el.style.color=‘blue’}} 使得csstransition包裹的div的颜色在入场结束后变为蓝色。

关于appear={true}，这样设置第一次出场就会有动画效果。

使用react-transition-group:实现多个元素的动画效果。

<TransitionGroup>
				{
					this.state.list.map((item, index) => {
						return (
							<CSSTransition
								timeout={1000}
								classNames='fade'
								unmountOnExit
								onEntered={(el) => {el.style.color='blue'}}
								appear={true}
								key={index}
							>
								<div>{item}</div>
							</CSSTransition>
						)
					})
				}
</TransitionGroup>

//（又有transitiongroup,又有csstransition)

回顾学过的类：
想一下，类，其实就是相当于对象，在类中，调用方法，是this.xx，在对象中，调用方法，是方法名.xx
这也是为什么要用this.xx
javascript中的类（这里的set ,get以前学过的):https://www.w3school.com.cn/js/js_class_inheritance.asp
如需使用 setter，请使用与设置属性值相同的语法，不带括号：

class Car {
  constructor(brand) {
    this._carname = brand;
  }
  get carname() {
    return this._carname;
  }
  set carname(x) {
    this._carname = x;
  }
}

let myCar = new Car("Ford");
myCar.carname = "Volvo";
document.getElementById("demo").innerHTML = myCar.carname;