React开发实（3）react 进阶

付泽宸
222 阅读5分钟

1、React 开发调试工具 安装

 1、Google 商店 https://chrome.google.com/webstore/category/extensions?hl=zh
 2、react dev tools 就会变成黑色

image.png

  • 组件信息 也比较方便，可以看到组件结构

2、propTypes 和 defaultProps

* 如何对接收参数 类型定义， 默认值如何做校验 ？

image.png

  • 当我尝试 更改 index 为 string 时

image.png

  • 当父组件并未传递 某个值，子组件却使用到了，怎么处理？

image.png

image.png

  • 可以限制 必须传递

image.png

image.png

  • 如果 父 组件确实没有 则 可以添加一个 默认值

image.png

image.png

  • 官方文档还有 一件事情 需要注意 可以有多种类型

  • 先尝试 敲一下

image.png

image.png

3、props, state, render 再思考

  • 两个重要的内容

      1、当组件的 state 和 props 发生变化时， render 会重新执行，渲染页面
  2、父组件 render 执行 默认 子组件的 render 也会执行（shouldComponentUpdate默认情况下为true）

    • 举例子说明一下 state变化时 页面重新渲染

image.png

image.png

image.png

  • 举例子说明一下 props 变化时 页面重新渲染 及 父组件 render 执行 子 render 也执行

image.png

image.png

image.png

4、什么是 虚拟 DOM ？

  • 注意 本节 虚拟 dom 和真实 dom 生成顺序 暂时写反

image.png

image.png

  • 对比 真实 DOM是 比较损耗性能大， 但对比 JS对象是 不损耗性能的

  • 再尝试 敲一下 其实将 dom 转为 js 对象 写法也不困难

image.png

{/* <div id='div1' class="container">
    <p>vdom</p>
    <ul style='font-size: 2px'>
        <li>a</li>
    </ul>
</div> */}

{
    tag: 'div',
    props: {
        className: 'container'
        id: 'div1' 
    },
    children: [
        {
            tag: 'p',
            children: 'vdom'
        },
        {
            tag: 'ul',
            props: {
                style: "font-size: 2px"
            },
            children:[
                tag: 'li',
                children: 'a'
            ]
        }
    ]
}

5、什么是 虚拟 DOM 补充？

image.png

  • 也就是说 看到的 JSX 其实不是 真实的 DOM节点

image.png

  • 将 dom 转为了 js 对象， 在原生应用当中 转为了对应的 语法表达 image.png

6、什么是 虚拟 DOM 中的 diff 算法 ？

  • 虚拟 DOM 只会进行一次 比对操作 image.png

image.png

image.png

  • 为啥不要使用 index 作为 key 值原因

  • 比如 当前 添加了三个内容 image.png

  • 这样就导致 无法 复用，因为 b c 当前的 key不对应 需要删除 重建

image.png

  • 尝试将 key 值 更改为 不相同的（假设 item 不重复）

image.png

image.png

image.png

image.png

image.png

7、React 中 ref 使用 ？

  • 目的是 拿到某个 dom 然后操作 dom 其实 e.target 也可拿到数据

  • 比较细节 也比较基础的内容，较少用 , React 中 操作 某个 元素DOM

      1、选择 某个元素  比如 (input) => this.input = input
  2、在 setState 中使用 注意 这个异步函数需要 放在第二个参数 位置， 才能拿到state 更新后的值

  • 举例子说明一下 这个事情 使用 ref 选择某个元素 其实有几种方法

image.png

image.png

image.png

  • length 对应不上

image.png

  • 注意 setState 第二个参数 是个 函数

image.png

image.png

8、React 生命周期 部分 ？

image.png image.png

1、 初始化阶段 设置 props 和 state

image.png

2、挂载阶段

image.png

  • 此处 注意

image.png

3、更新阶段

  • 简单来说 数据发生变化时，执行， 数据变化体现在 props/state 变化

  • 先不说WillReceiveProps 因为下面的流程两个相同

image.png

image.png

  • 注意componentWillReceiveProps 不会在顶层组件执行

image.png

image.png

4、卸载阶段

  • 此处例子 删除 子组件时 执行 卸载

image.png

image.png

  • 还需要注意一件事情 每个 组件都可以有这些生命周期函数

  • 比如 父组件 render 子组件也可 render

9、React 生命周期 使用场景 ？

1、需要注意的事情， class 组件必须 需要 render 这个生命周期函数，因为 组件 extends React.Component 这个内置了其他的生命周期函数，没有 render

2、父组件更新 子组件也会默认更新，如何优化这个事情 ？

image.png

image.png

image.png

  • 只会更新一次 ，只有 props 变化时 才会改变

image.png

  • 性能优化方案 简述

      1、setState 多次操作可以被合并 
  2、绑定 this 的操作放在 constructor 中
  3、使用 scu 避免子组件多次重复渲染
  4、使用 React.lazy 懒加载
  5、使用 React.memo 检查 props 更改再变化
  const MyComponent = React.memo(function MyComponent(props) {/* render using props */});
  ```

  • 生命周期函数中发送异步请求 componentDidMount ？

  • 我们先假设直接在 render 中直接写会怎样 ？

image.png

  • 正确的姿势是 这样的

     1、安装一个 axios
 2、使用 
 3、注意 工作中常规 将 api 请求放在 thunk 中，直接调用

image.png

image.png

10、使用 Charles 进行接口数据模拟 ？

      1、先使用 终端 touch item.json 在桌面新建一个文件，添加一点内容
      2、打开 Charles 使用 tools --> map Local
      3、填写端口后和信息
      4、选择桌面 json 文件 
      5、浏览器 再次请求 成功后可以渲染数据
      6、数据渲染 时候 通过更改 state 值 渲染数据

image.png

image.png

image.png

11、React 的 CSS 过渡动画 ？

  • 新建一个 展示 css 的组件

image.png

image.png

  • 添加一个 CSS 文件

image.png

12、React 中使用 css 动画效果 ？

  • 需要 学会这样的简单使用

image.png

13、React 中使用 react-transition-group 实现动画 ？

  • 使用这个 进行更加 复杂的动画模块编写，可用到工作上

          1、安装 yarn add react-transition-group
      2、按照文档引入使用 
      3、

image.png

image.png

  • 就可非常开心的看到效果

  • 官方文档再次写在此处 reactcommunity.org/react-trans…

  • 再加一部分 内容 一组动画怎么添加 ？ 需要使用到 group

      1、使用 group 包裹
  2、内层使用 cssTransition

  • 将代码 放在此处

  • js

import { CSSTransition, TransitionGroup } from "react-transition-group";
import "./app.css";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { list: [] };
  }

  handleAddItem = () => {
    this.setState((prevState) => {
      return {
        list: [...prevState.list, "item"],
      };
    });
  };

  render() {
    return (
      <>
        <TransitionGroup>
          {this.state.list.map((item, index) => {
            return (
              <CSSTransition
                timeout={1000}
                classNames="fade"
                unmountOnExit
                appear={true}
                key={index}
              >
                <div>{item}</div>
              </CSSTransition>
            );
          })}
        </TransitionGroup>
        <button onClick={this.handleAddItem}>toggle</button>
      </>
    );
  }
}

export default App;
  • css
.show{
    animation: show-product 2s ease-in forwards;
}

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

@keyframes show-product {
    0%{
        opacity: 0;
        color: red
    }
    50%{
        opacity: 0.5;
        color: yellow;
    }
    100%{
        opacity: 1;
        color: green;
    }
} */


.fade-enter{
    opacity: 0;
}
 .fade-enter-active{
    opacity: 1;
    transition: all 1s ease-in-out;
}

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

.fade-exit{
    opacity: 1;
} 

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

.fade-exit-done{
    opacity: 0;
}
  • 非常感谢 本节完！

撒花 🎉🎉🎉

更多项目请访问 github github.com/huanhunmao

gitee 项目地址 gitee.com/huanhunmao/…

avatar
文章
阅读
粉丝