Mosh-react系列课程:

p1:react的核心就是组件
p4:ReactDOM.render(,document.getElementById("root")) 渲染根组件
p5:package.json里面包含着所有的安装依赖包信息
p15: 字符串模版的写法:

const colors=["red","orange","green"];
const items=colors.map(color=>`
  • ${color}
  • `); console.log(items);

    p16:解构复制重命名变量:


    Mosh-react系列课程:_第1张图片
    image.png

    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:通过行内的箭头函数,直接在箭头函数内部调用传参函数

    {this.handleClick(a)}}>
    

    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方法的小节以及分页功能的实现:


    Mosh-react系列课程:_第2张图片
    lodash中range方法.png
    Mosh-react系列课程:_第3张图片
    lodash中的take方法.png

    还有一点需要注意的是,将数组转换为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 [email protected]
    //引入
    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;

    你可能感兴趣的:(Mosh-react系列课程:)