p1:react的核心就是组件
p4:ReactDOM.render(<Movies/>,document.getElementById("root")) 渲染根组件
p5:package.json里面包含着所有的安装依赖包信息
p15: 字符串模版的写法：
const colors=["red","orange","green"];
const items=colors.map(color=>`<li>${color}</li>`)；
console.log(items);
p16:解构复制重命名变量：
p17:展开符，数组的拼接
const a=[1,2,3];
const b=[4,5,6];
const combined1=a.concat(b);
const combined2=[...a,...b];
//二者结果一致，第二种通过展开符的更加灵活
p32:"this不能在super方法之前使用"
p33:更新state状态
不能直接通过this.state....=...来更新state状态；
更新状态要通过this.setState({ })方法来更新。
p34:更新状态时发生了什么？
当state发生变化的时候，react会计划调用一次render函数，未来的某一个时刻会渲染，但是我们不知道何时会渲染，这就是异步调用，将在未来发生，然后返回一个react元素--虚拟dom，对比之前的虚拟dom，修改发生改变的部分。
p35:传递事件参数
1:可以通过在外面包裹一层函数
2:通过行内的箭头函数，直接在箭头函数内部调用传参函数
<span onClick={()=>{this.handleClick(a)}}></span>
p36Mac快捷键：option+command+i ===》 快速打开网页控制台
p44:passing children
{this.props.children}//适用于传递一些复杂的对话框的等等
p45：Debugging react Apps--react程序查虫🐛
React Developer Tools
p46:state和props的区别
state：组件本地或私有的数据容器
porps：只能读，不能修改
p47:发起和处理事件
"组件还有他们各自的状态，只有自己能编辑自己的状态";
也就是说如果子组件想要改变父级组件的state，那么只能通过父级组件传递过来的方法进行修改，不能通过子组件方法修改。
p48:一些列表项目的删除或者添加的操作可以通过数组的filter方法，对新拷贝出来的数组进行修改，然后通过setstate方法对组件的state进行操作。
p50:删除本地state
当父组件和子组件都有state的时候，有时候会出现state更新了，但是没在页面显示渲染的问题，这个时候就要删除子组件的本地state，让其升级为受控组件。
p53:无状态功能组件
就是一个接收props为参数的箭头函数，返回jsx;
p55:生命周期钩子(90%的情况下用到下面的这些)
Mount： constructor、render、componentDidMount
Update：render、componentDidUpdate
unMount:componentWillIUnMount
p61:like组件的启发：
当对一个数组中的每一个小项进行处理的时候，比较好用的方法就是：
handleLike=(movie)=>{
const movies=[...this.state.movies];//拷贝原数据
const index=movies.indexOf(movie);//在拷贝的数据中寻找这个item（movie）的索引值；
movies[index]={...movie};
movies[index].liked=!movie.liked;//对拷贝数据中拥有这个索引值的这个项目进行修改
this.setState({movies:movies});//通过setState更改状态
}
p65:“当想创建一个可复用的组件的时候，实现之前先考虑清楚接口--这个组件接收什么，发起什么事件...最好的思考方式就是实现之前先‘用’它。”
p67:小技巧：vscode下面，command+p搜索框内+@+想要搜索的内容可以快速找到相应的代码。
p68:lodash方法的小节以及分页功能的实现：
还有一点需要注意的是，将数组转换为lodash对象的然后再转换回来的操作（为了方便链式操作）：
a）数组转换为lodash对象：_("想要转换为lodash对象的数组")--->得到一个lodash对象
b)将ladash对象变为普通数组：调用value()
心得：实现需求的时候现将一个个小的需求实现，比如：分页功能就是分页功能，那就先实现分页，不要将分页和分页渲染数据两个结合在一起去考虑，容易混乱，单独去考虑每一个的实现有利于整理思路，实现需求。
1.需要获得总共的条目总数a
2.设置好每页的容量，也就是每页有多少条目b
3.将上面的ab用作属性传给子组件，并在子组件里面得到算出总的页面数c。
4.通过loadsh的_range(1，c+1)方法建立一个数组并遍历这个数组。
5.每页现实的内容实现方法如下：
import _ from "lodash";
// items：数组
// pageNumber：页数
// pageSize：页面容量
export function paginate(items,pageNumber,pageSize){
const startIndex=(pageNumber-1)*pageSize;
//slice切割数组，t
return _(items).slice(startIndex).take(pageSize).value();
}
p69:类型检测：口诀：引入和使用都是使用PropTypes，组件后面的用驼峰命名。
//安装
npm i props-types@15.6.2
//引入
import PropTypes from "prop-types"
//使用
Pagination.propTypes={
itermsCount:PropTypes.number,
pageSize:PropTypes.number,
onhandleChange:PropTypes.func,
currentPage:PropTypes.number
}
p70:创建一个新的组件的思路过程：
当创建一个组件的的时候，首先要考虑它的接口；而考虑接口的最好办法就是在实现它之前，先去使用它。
p77:封装组件:思路还是一样的，先建立组件，然后将想要独立的部分拿出来，并对接口进行修改，然后在大组件中引入这个新建立的组件，传入必要的接口数据就好啦，主要还是思路啦，思路要清晰，码代码还是要思路清晰，知道自己每一步都在干啥，这个才比较重要😘。
p79:利用lodash的orderby进行排序：
关于order的内容如下：
const sorted=_.orderBy(filtered,[sortColoum.path],[sortColoum.order]);
https://www.html.cn/doc/lodash/#_orderbycollection-iteratees_identity-orders
p80:
1:子组件想要改变父组件的state就必须调用父组件的方法
2:子组件处理数据的时候不要忘记灵活的运用父组件传递过来的props；
