React 学习笔记 Part III

Sun_Raiser

已于 2022-02-01 20:30:34 修改

阅读量511

点赞数

分类专栏： # React 文章标签： react.js 前端 javascript

于 2022-01-22 16:12:46 首次发布

本文链接：https://blog.csdn.net/Sun_Raiser/article/details/122638967

版权

React 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

React

b站课程链接跳转

ps： written by Winter-prince

学习前端React做的笔记，供以后复习使用。关键代码基本上都有截图和文字说明，有些部分可能由于内容比较简单没有记录，点击上方课程链接即可跳转前往课程查看详情，关于React的笔记一共有5篇博客，如果需要查看完整内容的请前往专栏查看

我的github：Winter-prince

P41-60

P41 父组件render流程

class A extends React.Component {
  //初始化状态
  state = { carName: "奔驰" };
  changeCar = () => {
    this.setState({ carName: "奥拓" });
  };
  render() {
    return (
      <div>
        <div>我是A组件</div>
        <button onClick={this.changeCar}>换车</button>
        <B carName={this.state.carName} />
      </div>
    );
  }
}
class B extends React.Component {
  render() {
    return <div>我是B组件，接收到的车是:{this.props.carName}</div>;
  }
}

第一次传数据不算

class B extends React.Component {
  componentWillReceiveProps(props) {
    console.log(" B---componentWillReceiveProps ", props);
  }
  render() {
    return <div>我是B组件，接收到的车是: {this.props.carName}</div>;
  }
}

P42 旧生命周期总结

初始化阶段:由ReactDOM. render()触发—初次渲染
1. constructor( )
2. componentWillMount( )
3. render( )
4. componentDidMount() =====> 常用
  
  一般在这个钩子中做一些初始化的事，例如:开启定时器、发送网络请求、订阅消息.
更新阶段:由组件内部this . setSate( )或父组件render触发
1. shouldComponentUpdate()
2. componentWillUpdate( )
3. render() =====> 必须
4. componentDidUpdate()
卸载组件:由ReactDOM. unmountComponentAtNode( )触发
1. componentWillUnmount() =====> 常用
  
  一般在这个钩子中做一些收尾的事，例如:关闭定时器、取消订阅消息

P43 新旧生命周期对比

bootCDN网址，前端人员常用

加前缀UNSAFE_前缀，

在这里插入图片描述
区别：3 will 2 新

在这里插入图片描述

P44 getDerivedStateFromProps

使用场景十分罕见，若state的值在任何时候都取决于props,那么可以使用

在这里插入图片描述

P45 getSnapshotBeforeUpdate

在更新之前获取快照，以便在更新之后获取数据

P46 getSnapshotBeforeUpdate举例

在这里插入图片描述

P47 总结生命周期

重要的勾子

render: 初始化渲染或更新渲染调用

componentDidMount: 开启监听,发送ajax请求

componentWillUnmount: 做一些收尾工作,如:清理定时器。

即将废弃的勾子

componentWillMounte
componentWillReceiveProps
componentWillUpdate
现在使用会出现警告，下一个大版本需要机上UNSAFE_前缀才能使用，以后可能会被彻底废弃，不建议使用。

P48 DOM的diffing算法

最小粒度是标签

index作为key可能会导致的错误

2.用index作为key可能会引发的问题:
1.若对数据进行:逆序添加、逆序删除等破坏顺序操作:会产生没有必要的真实DOM更新==>界面效果没问题，但效率低。
2.如果结构中还包含输入类的DOM:会产生错误DOM更新==>界面有问题。
3.注意!如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有间题的。

3.开发中如何选择key?:
1.最好使用每条数据的唯一标识作为key,比如id、手机号、身份证号、学号等唯一-值。
2.如果确定只是简单的展示数据，用index也是可以的。

P49 初始化react脚手架

npm i -g create-react-app
create-react-app hello-react

在这里插入图片描述
yarn start

npm start

P50 脚手架介绍public

SPA 单页面应用，只有一个index界面

其他的都在组件里

robots.txt 爬虫规则文件

    <meta charset="utf-8" />
    <!-- %PUBLIC_URL% 代表public文件夹的路径 -->
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <!-- 开启理想视口，用于做移动端网页的适配 -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- 用于配置浏览器页签+地址栏的颜色(仅支持安卓手机浏览器) -->

    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <!-- 用于指定网页添加到手机主屏暮后的图标 -->
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!-- 应用加壳时的配置文件 -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>React App</title>
  </head>
  <body>
    <!-- 若浏览器不支持js则展示标签中的内容 -->
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

  </body>

P51 脚手架介绍src

在这里插入图片描述

P52 简单的Hello组件/项目

webpack-dev-server
在这里插入图片描述
多种暴露形式

项目结构
在这里插入图片描述

P53 样式的模块化

在这里插入图片描述

P54 插件

快捷输入
rcc 类组件

rfc 函数组件

P55 组件化编码流程

在这里插入图片描述

P56 案例

组件拆分，静态显示

P57组件间通信

父通过props向子传递函数，子调用父函数，即可实现子向父传递参数

P58

P59 鼠标移入移出案例

export default class Item extends Component {
  state = { mouse: false };
  handleMouse = (flag) => {
    return () => {
      this.setState({ mouse: flag });
    };
  };
  render() {
    const { name, done } = this.props;
    const { mouse } = this.state;
    return (
      <li
        style={{ backgroundColor: mouse ? "#ddd" : "white" }}
        onMouseEnter={this.handleMouse(true)}
      >
        <label>
          <input type="checkbox" defaultChecked={done} />
          <span>{name}</span>
        </label>
        <button
          className="btn btn-danger"
          style={{ display: mouse ? "block" : "none" }}
        >
          删除
        </button>
      </li>
    );
  }
}

P60 添加todo

  //初始化状态
  state = {
    todos: [
      { id: "001", name: "吃饭", done: true },
      { id: "002", name: "睡觉", done: true },
      { id: "003 ", name: "打代码", done: false },
      { id: "004", name: "逛街", done: true },
    ],
  };
  //addTodo用于添加一一个todo， 接收的参数是todo对象
  addTodo = (todo0bj) => {};
  //updateTodo用于更新-一个todo对 象
  updateTodo = (id, done) => {};

  render() {
    const { todos } = this.state;
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header addTodo={this.addTodo} />
          <List todos={todos} updateTodo={this.updateTodo} />
          <Footer />
        </div>
      </div>
    );
  }