关于前端:50天用reactjs重写50个web项目我学到了什么

35次阅读

共计 10661 个字符，预计需要花费 27 分钟才能阅读完成。

1.Expanding Cards

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

  1. React 的函数组件中建设数据通信，咱们通常应用 useState 办法。它的应用形式采纳数组解构的形式，如下:
const [state,setState] = React.useState(false);//useState 办法的参数能够是任意的 JavaScript 数据类型

解构的第一个参数是咱们定义并且拜访的数据状态，第二个参数则是当咱们须要变动数据状态时所调用的办法，其作用相似类组件中的this.setState。

更具体的应用形式参考文档 useState API。

2. 与类组件相似的钩子函数，或者也能够了解为是函数组件的生命周期 useEffect。它接管一个副作用函数effect 作为参数，如下所示:

useEffect(() => {});// 外面的箭头函数即副作用函数

以上示例只是做了一个简略的更换文档题目，事实上在这个副作用函数中，咱们能够做很多事件，详情参考文档 useEffect API。

3.React 外部有本人的一套事件机制，咱们称之为合成事件。它与失常的 JavaScript 绑定事件很相似，然而它将事件命名形式采纳了驼峰式写法，并且它也对事件对象做了一层包装，其名为 SyntheticEvent。留神，这是一种跨浏览器端的包装器，咱们如果想要应用原生的事件对象，能够应用nativeEvent 属性，这在前面的示例中可能会波及到。比方咱们以上的事件绑定:

onClick={onChangeHandler.bind(this,index) }

留神这里，咱们通常须要调用 bind 办法来将 this 绑定到该组件实例上，为什么要应用 bind 办法来绑定 this 呢，这是因为绑定事件的回调函数 (如这里的:onChangeHandler), 它是作为一个两头变量的，在调用该回调函数的时候this 指向会失落，所以须要显示的绑定 this, 这也是受JavaScript 本身个性所限度的。详情可参考 React 绑定 this 的起因中的解释。与之类似的是在类组件中绑定合成事件，咱们也一样须要显示的绑定 this 指向。

4.map办法的原理。map办法迭代一个数组，而后依据返回值来对数组项做解决，并返回解决后的数组, 请留神该办法不会扭转原数组。比方:

[1,2,3].map(i => i <= 1);// 返回[1]

jsx中渲染列表也正是利用了 map 办法的这一个性，并且咱们须要留神的是渲染列表的时候必须要指定一个 key, 这是为了不便DIFF 算法更好的比对虚构 DOM。

5.React 中给标签增加类名，咱们是写成 className 的，这是因为 class 被JavaScript当做关键字。而如果咱们须要动静绑定类名，能够看到，咱们应用了模板字符串，在这里更像是写 JavaScript，比方咱们能够利用三元表达式做判断。

6.React 中给标签绑定 style 款式，咱们通常能够绑定一个对象，在 React 中，咱们绑定动态数据就是写一对 {} 花括号，而后 style 外面的款式咱们通常申明成对象来示意，比方:

{background:"#fff"}

这代表它是一个款式对象，而后 React 会在外部去将款式对象转换成款式字符串，而后增加到 DOM 的 style 对象中。

2.Progress Steps

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

与第一个示例所用到的知识点很相似，相干的不用做阐明。接下来咱们来看不一样的。

  1. 父组件向子组件传递数据，咱们通常都是应用props。能够看到以上的示例，咱们裸露了 4 个 props，即:
width
stepItems
currentActive 
onClickItem

width 就是设置步骤条的容器宽度，这个没什么可说的,stepItems 就是步骤条的子组件，是一个数组，也能够在数组项中写 jsx。而 currentActive 则是传入的以后是哪一步，是一个索引值，通常应该是数值。至于 onClickItem 则是子组件裸露给父组件的办法。

  1. 类组件的生命周期。在这个类组件当中，咱们应用到了 constructor,componentDidMount,render 的生命周期钩子函数。咱们能够依据语义来揣测，当一个类组件被初始化时所经验的生命周期钩子函数执行程序肯定是 constructor => render => componentDidMount。从语义上来将constructor 是一个构造函数，用于初始化状态，而后初始化实现之后，咱们就会渲染组件，而后才是筹备挂载组件。

额定的，咱们扩大一下，依据文档阐明，咱们能够晓得具体的生命周期。React 组件生命周期蕴含 3 个阶段:

挂载 => 更新 => 卸载

在组件挂载之前执行的有:

constructor => static getDerivedStateFromProps => render => componentWillMount(行将过期) => componentDidMount

在组件 state 变更之后, 也就是更新之后，执行的有:

static getDerivedStateFromProps => shouldComponentUpdate => render => getSnapshotBeforeUpdate => componentWillReceiveProps(行将过期) => componentWillUpdate(行将过期) => componentDidUpdate

在组件卸载之后，执行的有:

componentWillUnmount

另还有错误处理的生命周期，也就是在渲染过程，生命周期，或子组件的构造函数产生谬误时，会执行的钩子函数:

static getDerivedFromStateError => componentDidCatch

这外面有些生命周期咱们并没有用到，有些则是简直涵盖了咱们后续的所有示例，所以咱们肯定要牢记组件的生命周期的程序。

然而就这个示例而言，咱们学会的应该是如何封装一个组件。

3.Rotating Navigation Animation

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

一些雷同同后面示例雷同的知识点自不必说，咱们来看不一样的知识点。

1. 模块组合导出

//components 目录下的 index.js 文件
export {default as Content} from './Content';
export {default as LeftMenu} from './LeftMenu';
export {default as NavList} from "./NavList";

能够看到，咱们能够将组件如下面那样导出，而后咱们就能够独自引入一个 js 文件，再引入相干的组件即可应用。如下:

import {Content, NavList, LeftMenu} from './components/index';

2.react 组件如何渲染 html 字符串

react 提供了一个 dangerouslySetInnerHTML 属性，这个属性的属性值是一个以 __html 作为属性，值是 html 字符串的对象，而后，咱们就能够将 html 字符串渲染成实在的 DOM 元素。如下所示:

<p dangerouslySetInnerHTML={{__html:"<span> 测试代码 </span>"}}></p>
//<p><span> 测试代码 </span></p>

4.hidden-search-widget

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

本示例同样的与后面的示例有一样的知识点，相干的不会做阐明，只会做不同的知识点介绍，后续的同理。

1. 判断数据的类型。利用对象原型链上的 toString 办法，咱们能够失去一个字符串值，这个字符串值的格局相似 [object Object] 这样，也就是说咱们能够通过这个字符串值来判断一个数据的类型。例如:

const getType = v => Object.prototype.toString.call(v).slice(8,-1).toLowerCase();
const isArray = v => getType(v) === "array";
isArray([1,2,3]);//true
isArray("");//false

这里咱们应该晓得 Object.prototype.toString.call(v) 返回的就是相似 [object Object] 这样的值。所以咱们通过截取开始索引为 8, 完结索引为该字符串长度减 1，也就是这里的 -1, 咱们就能够获取到第二个值 Object, 而后再调用toLowerCase() 办法来将全副字母转换成小写，而后，咱们就能够晓得数据的类型了。比方这里的判断是否是数组，那么只须要判断该值是否等于 ”array” 即可。

2.React.createRef API

有时候，咱们恰好须要操作一些原生 DOM 元素的 API，例如这个示例的输入框的关注焦点事件。这时候这个 API 就有了用武之地，咱们相当于应用这个 API 创立一个与 DOM 元素通信的桥梁，通过这个拜访这个 API 的实例的 current 属性，咱们就能够拜访到相应的 DOM 元素。

更具体的能够参考文档 createRef API。

3. 如何封装一个 input 组件。

这个示例也教会了咱们如何封装一个 input 组件。

5.Blurry Loading

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

  1. 在 componentDidMount 生命周期中创立定时器以及在 componentWillUnmount 中革除定时器。
  2. 类组件中的 this.setState 更新状态。该办法接管 2 个参数, 第一个参数则是咱们的 react 状态，它能够是一个函数，也能够是一个对象。第二个参数则是一个回调函数。谈到这里，可能就会提到一个问题，那就是 setState 到底是异步还是同步? 答案如下:

答:react 中的 setState 在合成事件和钩子函数中是 ” 异步 ” 的，而在原生事件和 setTimeout 中则是同步的。

之所以是 ” 异步 ”，并不代表在 react 外部中是 ” 异步 ” 代码实现的，事实上，它依然是同步执行的一个过程。

只是合成事件和钩子函数的调用程序在更新之前，导致在合成函数和钩子函数中没法立刻拿到更新后的值，所以就造成了所谓的 ” 异步 ”。

事实上，咱们能够通过制订第二个参数即 callback(回调函数)来获取到更新后的值。

react.js 对 setState 的源码实现也不是很简单，它将传入的参数作为值增加到 updater 也就是更新器的一个定义好的队列（即:enqueueSetState）中。

react 中的批量更新优化也是建设在合成事件和钩子函数 (也就是 ” 异步 ”) 之上的，在原生事件和 setTimeout 中则不会进行批量更新。

比方在 ” 异步 ” 中对同一个值进行屡次 setState, 根据批量更新则会对其进行策略笼罩，而如果是对不同的多个值 setState, 则会利用批量更新策略对其进行合并而后批量更新。

更具体的能够参考文档 setState。

除此之外，这里也有一个十分重要的工具函数(这在 js 的实现中也提及过)，如下所示:

const scale = (n,inMin,inMax,outerMin,outerMax) => (n - inMin) * (outerMax - outerMin) / (inMax - inMin) + outerMin;

这个工具函数的作用就是将一个范畴数字映射到另一个数字范畴。比方说，将 1 ~ 100 的数字范畴映射到 0 ~ 1 之间。
详情。

6.Scroll Animation

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

1. 动静组件

咱们通过 props 传递一个值用来确定组件名。这里以 Title 组件为例，如下所示:

import React from "react";
const TitleComponent = (props) => {let TagName = `h${ props.level}`;
    return (
        <React.Fragment>
            <TagName>{props.children}</TagName>
        </React.Fragment>
    )
}
export default TitleComponent;

尽管外围代码非常简略，这里须要留神，React 组件须要首字母大写，这算是一个约定的规定，其次咱们通过 props 传递一个 level 用来确定咱们应用的是 h1~h6 哪个来做标签，事实上这里咱们应该对 level 做一个限度，只允许值为1~6。

2.Fragment 元素

这个元素相似于一个占位符节点，咱们晓得，当两个元素并列在一个 React 组件中，是不被容许的，React 组件须要提供一个根节点，但有时候，咱们不须要一个理论的元素作为根节点包裹它们，所以咱们就能够应用 Fragment 元素来包裹它们。该元素还有一个简写<></>, 事实上在 Vue2.x 中也有这个限度，这是受虚构 DOM DIFF 算法所限度的。

更具体的能够见文档 Fragment。

3. 函数防抖

export const throttle = (fn, time = 1000) => {
    let done = false;
    return (...args) => {if (!done) {fn.call(this, ...args);
            done = true;
        }
        setTimeout(() => {done = false;}, time)
    }
}

函数防抖与节流可参考 这篇文章。

4. 监听滚动事件，事实上这里的实现原理同 JavaScript 实现版本统一，只不过略微转换一下思维即可。

7. Split Landing Page

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

这个示例波及到的知识点后面的示例都提及过，所以这里不用赘述。

8.Form Wave

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

  1. setState 更新对象，如果 state 是一个对象，咱们有 2 种形式来更新。
    1.1 利用 Object.assign 办法来更新。
    1.2 间接笼罩整个对象。

以上 2 种形式伪代码如下:

//  第 1 种形式
const loginInfo = Object.assign({},this.state.loginInfo,{[key]:updateValue
})
this.setState({loginInfo});
// 第 2 种形式
let {loginInfo} = this.state;
loginInfo[key] = updateValue;
this.setState({loginInfo});

9.Sound Board

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

这个示例波及到的知识点后面的示例都提及过，所以这里不用赘述。

10. Dad Jokes

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

  1. Suspense 组件的应用。该组件能够指定一个加载指示器组件，用来实现组件的懒加载。更具体的文档见 Suspense。
  2. 接口申请通常都是在 componentDidMount 钩子函数中实现的。因为不能间接在该钩子函数中更改状态(react.js 会给出一个正告)。所以咱们须要让接口申请变成异步。

11. Event Keycodes

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

这个示例波及到的知识点后面的示例都提及过，所以这里不用赘述。

12. Faq Collapse

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

这个示例波及到的知识点后面的示例都提及过，所以这里不用赘述。

13. Random Choice Picker

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

这个示例波及到的知识点后面的示例都提及过，所以这里不用赘述。

14. Animated Navigation

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

这个示例波及到的知识点后面的示例都提及过，所以这里不用赘述。

15. Incrementing Counter

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

  1. react.js 如何更新数组的某一项？在这里我是更新整个数组的，或者这不是一种好的形式。也心愿有大佬能提供思路。我的代码如下:
startCounter() {const counterList = [...this.state.counterList];
    // https://stackoverflow.com/questions/29537299/react-how-to-update-state-item1-in-state-using-setstate
    // https://stackoverflow.com/questions/26253351/correct-modification-of-state-arrays-in-react-js
    counterList.forEach(counter => {const updateCounter = () => {
          const value = counter.value;
          const increment = value / 100;
          if (counter.initValue < value) {counter.initValue = Math.ceil(counter.initValue + increment);
            // use setTimeout or setInterval ?
            counter.timer = setTimeout(updateCounter, 60);
          } else {
            counter.initValue = value;
            clearTimeout(counter.timer);
          }
          // update the array,maybe it's not a best way,is there any other way?
          this.setState({counterList});
      }
      updateCounter();})
}

16. Drink Water

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

  1. 这里踩了一个坑，如果应用 new Array().fill()来初始化状态，会导致意想不到的渲染成果。所以这里间接初始化了所有的数组项。

详见源码。

17. movie-app

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

这个示例波及到的知识点后面的示例都提及过，所以这里不用赘述。

PS: 这个示例成果因为接口拜访受限，须要你懂的拜访。

18. background-slider

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

这个示例波及到的知识点后面的示例都提及过，所以这里不用赘述。

19. theme-clock

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

  1. 中英文切换是通过定义一个对象来实现的。其它的没什么好说的，都是后面提及过的知识点。

PS: 本示例也用到了与示例 5 一样的工具函数 scale 函数

20. button-ripple-effect

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

  1. 能够通过调用函数来渲染一个组件。

21. drawing-app

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

  1. 在 react.js 中应用ew-color-picker。
  2. 这里踩了一个坑，也就是说必须要设置线条的款式。
this.ctx.lineCap = "round";

否则线条的款式不对劲，尽管我也没有搞清楚这外面的起因。毕竟 js 版本的实现也没有须要显示的设置这个线条的款式。

22. drag-n-drop

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

  1. 这里也踩了一个坑，详见源码正文。

23. content-placeholder

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

  1. 一些判断 react 组件的工具函数。如下:
import React from "react";
export function isString(value){return typeof value === "string";}
export function isClassComponent(component) {return typeof component === 'function' && !!component.prototype.isReactComponent;}

export function isFunctionComponent(component) {return typeof component === 'function' && String(component).indexOf('return React.createElement') > -1;
}

export function isReactComponent(component) {return isClassComponent(component) || isFunctionComponent(component);
}

export function isElement(element) {return React.isValidElement(element);
}

export function isDOMTypeElement(element) {return isElement(element) && typeof element.type === 'string';
}

export function isCompositeTypeElement(element) {return isElement(element) && typeof element.type === 'function';
}
  1. 如何封装一个卡片组件。

24. kinetic-loader

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

这个示例波及到的知识点后面的示例都提及过，所以这里不用赘述。

25. sticky-navbar

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

这个示例波及到的知识点除了一个工具函数，其它的知识点后面的示例都提及过，所以这里不用赘述。

export function marked(template){return template.replace(/.+?[\s]/g,v => `<p>${v}</p>`);
}

这个工具函数的作用就是匹配以空格完结的任意字符，而后替换成 p 标签包裹这些内容。

PS: 这里也做了挪动端的布局。

26. double-slider

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

这个示例波及到的知识点，后面的示例都提及过，所以这里不用赘述。

27. toast-notification

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

  1. 能够利用 ReactDOM.render 来封装一个函数调用的 toast 组件。
  2. ReactDOM.unmountComponentAtNode API的用法这个办法会将从 DOM 中卸载组件，包含事件处理器和 state。详见 文档。
  3. getDerivedStateFromProps 动态函数。详见 文档。

28. github-profiles

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

这个示例波及到的知识点，后面的示例都提及过，所以这里不用赘述。

29. double-click-heart

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

  1. 从合成事件对象中读取原生的事件对象。即 nativeEvent 属性。

30. auto-text-effect

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

这个示例波及到的知识点，后面的示例都提及过，所以这里不用赘述。

31. password generator

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

这个示例波及到的知识点，后面的示例都提及过，所以这里不用赘述。

32. good-cheap-fast

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

  1. 如何封装一个 switch 组件，即开关小组件。

33. notes-app

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

这个示例波及到的知识点，后面的示例都提及过，所以这里不用赘述。

34. animated-countdown

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

这个示例波及到的知识点，后面的示例都提及过，所以这里不用赘述。

35. image-carousel

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

这个示例波及到的知识点，后面的示例都提及过，所以这里不用赘述。

36. hover board

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

  1. react.js 合成事件中的 setState 是同步的，所以这里应用原生的监听事件来实现。详见源码。

37. pokedex

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

这个示例波及到的知识点，后面的示例都提及过，所以这里不用赘述。

38. mobile-tab-navigation

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

这个示例波及到的知识点，后面的示例都提及过，所以这里不用赘述。

39. password-strength-background

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

  1. 照着 文档 一步步将 tailwindcss 增加到 create-react-app 脚手架中。

40. 3D-background-boxes

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

这个示例波及到的知识点，后面的示例都提及过，所以这里不用赘述。

41. Verify Your Account

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

这个示例波及到的知识点，后面的示例都提及过，所以这里不用赘述。

42. live-user-filter

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

这个示例波及到的知识点，后面的示例都提及过，所以这里不用赘述。

43. feedback-ui-design

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

这个示例波及到的知识点，后面的示例都提及过，所以这里不用赘述。

44. custom-range-slider

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

这个示例波及到的知识点，后面的示例都提及过，所以这里不用赘述。

45. netflix-mobile-navigation

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

  1. 为如何实现一个递归组件提供了思路。

46. quiz-app

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

这个示例波及到的知识点，后面的示例都提及过，所以这里不用赘述。

47. testimonial-box-switcher

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

这个示例波及到的知识点，后面的示例都提及过，所以这里不用赘述。

48. random-image-feed

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

  1. 实现一个繁难版本的预览图片。

49. todo-list

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

这个示例波及到的知识点，后面的示例都提及过，所以这里不用赘述。

50. insect-catch-game

成果如图所示:

  • 源码
  • 在线示例

学到了什么?

这个示例波及到的知识点，后面的示例都提及过，所以这里不用赘述。

特地阐明: 这个示例算是一个比拟综合的示例了。

正文完
前端
发表至： 前端
2021-10-14
 0
关于前端:观察者网专访明道云CEO任向晖
关于前端:vue3创建全局属性和方法
关于前端:打造企业OA办公系统很难是你的打开方式不对吧
关于前端:每日一题之Vue的异步更新实现原理是怎样的