TRY CODING FUN

React Hooks 中父组件中调用子组件方法

发表于 2021-05-15 分类于 React
本文字数： 1.3k 阅读时长 ≈ 1 分钟

需求

React 父组件主动触发子组件的方法

解决方法

主要用到了 useRef useImperativeHandle forwardRef 3 个方法

子组件代码如下，用 useImperativeHandle 将方法暴露出去

import React, { useState, useImperativeHandle, forwardRef } from 'react';
import { MyComponent } from 'my-component';

const Children = forwardRef((props, ref) => {
  const [myState, setMyState] = useState([]);
  useImperativeHandle(
    ref,
    () => ({
      myState,
      setMyState,
    }),
    [myState]
  );
  return <MyComponent {...props} />;
});

export default Children;

父组件代码如下，主要是用 useRef

import React, { useState, useRef } from 'react';
import Children from 'children';

const Parent = (props, ref) => {
  const [ref] = useRef(null);

  const setState = (params) => {
    ref.current.setMyState(params);
  };

  const getState = () => {
    console.log('getState :>> ', ref.current.myState);
  };

  return (
    <div>
      <div
        onClick={() => {
          setState(1111);
        }}>
        setState
      </div>
      <div
        onClick={() => {
          getState();
        }}>
        getState
      </div>
      <Children ref={ref} />
    </div>
  );
};

后记

这个最好看一下react官方文档

useimperativehandle
useref

webpack 映入 svg 文件

发表于 2021-05-15 分类于 Webpack
本文字数： 258 阅读时长 ≈ 1 分钟

公司的脚手架竟然没有加载 svg 图标功能？导致我引入 svg 图片失败。

解决方法

webpack 用 file-loader 引入 svg 图标文件

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg/,
        use: ['file-loader'],
      },
    ],
  },
};

后记

当然，用 url-loader 应该也有效果。但是由于我不知道公司的脚手架内部的 url-loader 配置是什么样的，所以我没有覆盖 url-loader 的配置。

JS Tree 树状数据 Object Array互转

发表于 2021-05-14 更新于 2021-05-15 分类于 JavaScript
本文字数： 1.4k 阅读时长 ≈ 1 分钟

问题

需要这两个格式的数据，能够互相转换。

let obj = {
  a: 123,
  b: { a: 456, b: 789, c: { d: 111, e: 222 } },
  f: 11,
};

let arr = [
  { name: 'a', value: 123 },
  {
    name: 'b',
    value: undefined,
    children: [
      { name: 'a', value: 456 },
      { name: 'b', value: 789 },
      {
        name: 'c',
        value: undefined,
        children: [
          { name: 'd', value: 111 },
          { name: 'e', value: 222 },
        ],
      },
    ],
  },
  { name: 'f', value: 111 },
];

注意，对象名称为 name，对象的值不一定是 value，对象的值遇见 children 的时候，是个对象。

解决问题

我用的是循环递归，因为我太菜了

群里说的有 BFS 什么的，我知道这东西也大概用过，但说来惭愧，不会。

这个循环递归的方法有个大佬说还会爆栈，内存溢出。

// 数组转对象
function arrayToObject(params) {
  let obj = {};
  for (let index = 0; index < params.length; index++) {
    const element = params[index];
    const { name, value } = element;
    if ('children' in element) {
      obj[name] = arrayToObject(element.children);
    } else {
      obj[name] = value;
    }
  }
  return obj;
}

// 对象转数组
function ObjectToArray(params) {
  let array = [];
  for (const key in params) {
    if (Object.hasOwnProperty.call(params, key)) {
      const element = params[key];
      if (Object.prototype.toString.call(element) === '[object Object]') {
        array.push({ name: key, value: undefined, children: ObjectToArray(element) });
      } else {
        array.push({ name: key, value: element });
      }
    }
  }
  return array;
}

console.log(arrayToObject(arr));
console.log(ObjectToArray(obj));

求更好的解法

目前没有求到更好的解法，我先把解法和代码贴出来。

JS 判断对象的值是否全true

发表于 2021-05-14 分类于 JavaScript
本文字数： 681 阅读时长 ≈ 1 分钟

问题

只要有一个对象的值为非 true，则返回 true

let test = {
  a: true,
  b: true,
  c: true,
  d: false,
};

解决方法

我自己开始傻傻的写了个循环去判断，群里也顺便问了一下有没有更优雅的解法，还真有

我的写法

function isTrue(params) {
  for (const key in params) {
    if (Object.hasOwnProperty.call(params, key)) {
      const element = params[key];
      if (element !== true) {
        return false;
      }
    }
  }
  return true;
}

群友（@北京-菜鸟-板板/yt ）的解法

1	Object.values(test).every((item) => item === true);

大佬的解法是不是更优雅？

后记

后来期望加一个可以复位对象的值为 false 的方法

function resetFalse(params) {
  let obj = {};
  for (const key in params) {
    if (Object.hasOwnProperty.call(params, key)) {
      obj[key] = false;
    }
  }
  return obj;
}

在群里问了一圈，被 diss 了，没错，被 diss 了。这都是简单的基操，，我就是想提升一下自己，学习更好的解法。

浅谈 css position 为 absolute 问题

发表于 2021-05-08 分类于 Css
本文字数： 587 阅读时长 ≈ 1 分钟

碰到了个问题，就是子元素设置了 position: absolute; 但是没有相对于上一级的父元素进行定位

我当时我直接疑惑.jpg 这个表情

后来查了一下，原来是上一级的父元素要设置 position: relative; 属性

需求

元素 A 相对于元素 B 定位

实现

#father {
  position: relative;
}

#son1 {
  position: absolute;
  top: 0;
}

#son2 {
  position: absolute;
  bottom: 0;
}

<div id="father">
  <div id="son1"></div>
  <div id="son2"></div>
</div>

自嘲

3年了，3年了！你前端弄了3年了，这都不知道？

css 最基础的相对定位都不会，这前端怕是白学了

后记

等会，为啥父元素要加 position: relative; 才能生效？

被大佬Diss

你谈的是css样式表，是针对HTML元素生效的，不是针对什么组件生效的

原来文章中用的是 “组件”

文章中的 “组件” 修改为 “元素”

感谢这位大佬。云香水识，然后这位大佬在招人，Flow+了解一下？

PS: 进这个大佬厂子一年，有大佬带，进去一年顶普通厂子三年，想去的可以给我留言。

浅谈 css hover

发表于 2021-05-08 分类于 Css
本文字数： 527 阅读时长 ≈ 1 分钟

我实在是太菜了，一个前端，连这个都不会，还需要查？

CSS :: child set to change color on parent hover, but changes also when hovered itself

需求

鼠标移到父 div 的时候，子 div 显示，鼠标移出父 div 的时候，子 div 隐藏。

实现

.parent {
  padding: 50px;
  border: 1px solid black;
}

.parent span {
  position: absolute;
  top: 200px;
  padding: 30px;
  border: 10px solid green;
}

.parent:hover span {
  border: 10px solid red;
}

.parent span:hover {
  border: 10px solid green;
}

<a class="parent">
  Parent text
  <span>Child text</span>
</a>

自嘲

一个快 3 年的前端，连着都没玩过，还要查资料确认，乐色乐色真的乐色 too low

使用 Node.js 实现简单的 Express 入口

发表于 2021-04-30 分类于 JavaScript
本文字数： 806 阅读时长 ≈ 1 分钟

梵大的第一道题，怎么构建一个 express，入口函数实现。

这儿指的应该不是用 express，用 express 太简单了。。

应该是用 node 的 api 实现一个简单的 express。

const http = require('http');
const url = require('url');
const fs = require('fs');

http
  .createServer(function (req, res) {

    let { url: requestUrl } = req
    let q = url.parse(requestUrl, true);

    var filename = '.' + q.pathname;

    fs.readFile(filename, function (err, data) {
      if (err) {
        res.writeHead(404, { 'Content-Type': 'text/html' });
        return res.end('404');
      }
      res.writeHead(200, { 'Content-Type': 'text/html' });
      res.write(data);
      return res.end();
    });
  })
  .listen(8080);

后记

开始我没加入

1	res.writeHead(200, { 'Content-Type': 'text/plain;charset=utf-8' });

这行代码，然后返回的中文是乱码的

然后我查了一下资料加上了这段话就好了。

等一下，还有，这是第一题的具体要求，我只写了简单的http模块，url处理

还有3、4我还没写

http 模块
url 处理
路由识别，优先级
资源识别、响应头设置、压缩、流式输出、缓存

函数实现
next 怎么处理

React 性能优化之 React.memo

发表于 2021-04-30 分类于 React
本文字数： 804 阅读时长 ≈ 1 分钟

我的项目中，有个可编辑表单，多次复用了一个组件，但是父组件更新时，总是会更新子组件。然后页面就会有略卡的感觉，我意识到我应该优化一下项目了。

我查了一下 React 提供了 React.memo 方法可以让子组件在 prop 未发生变化的时候，不重新刷新 dom

参见 React.memo

React.memo

const MyComponent = React.memo(function MyComponent(props) {
  /* 使用 props 渲染 */
});
React.memo 为高阶组件。

如果你的组件在相同 props 的情况下渲染相同的结果，那么你可以通过将其包装在 React.memo 中调用，以此通过记忆组件渲染结果的方式来提高组件的性能表现。这意味着在这种情况下，React 将跳过渲染组件的操作并直接复用最近一次渲染的结果。

React.memo 仅检查 props 变更。如果函数组件被 React.memo 包裹，且其实现中拥有 useState，useReducer 或 useContext 的 Hook，当 context 发生变化时，它仍会重新渲染。

默认情况下其只会对复杂对象做浅层对比，如果你想要控制对比过程，那么请将自定义的比较函数通过第二个参数传入来实现。

function MyComponent(props) {
  /* 使用 props 渲染 */
}
function areEqual(prevProps, nextProps) {
  /*
  如果把 nextProps 传入 render 方法的返回结果与
  将 prevProps 传入 render 方法的返回结果一致则返回 true，
  否则返回 false
  */
}
export default React.memo(MyComponent, areEqual);

此方法仅作为性能优化的方式而存在。但请不要依赖它来“阻止”渲染，因为这会产生 bug。

React 性能优化之 useCallback

发表于 2021-04-30 分类于 React
本文字数： 1.3k 阅读时长 ≈ 1 分钟

在同事的项目中，我经常看到他们会用到 useCallback 我抽了点时间去了解它，但是越了解这个函数给我带来的困扰越大。

参见官方文档：useCallback

然而，，，可能理解能力太差了，我不是很理解。

官方说明

1
2
3

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

返回一个 memoized 回调函数。

把内联回调函数及依赖项数组作为参数传入 useCallback，它将返回该回调函数的 memoized 版本，该回调函数仅在某个依赖项改变时才会更新。当你把回调函数传递给经过优化的并使用引用相等性去避免非必要渲染（例如 shouldComponentUpdate）的子组件时，它将非常有用。

网上查资料

思否上的文章，不错：你不知道的 useCallback

尽管作者已经解释的很详细了，但是我的困扰确实是越来越多了，后来我看到了另外一篇国外的文章，恍然大悟

Your Guide to React.useCallback()

这是一篇英文文章。

它再最开始，举出了这样的例子

function factory() {
  return (a, b) => a + b;
}

const sum1 = factory();
const sum2 = factory();

sum1(1, 2); // => 3
sum2(1, 2); // => 3

sum1 === sum2; // => false
sum1 === sum1; // => true

这样理解起来就方便多了，组件在重绘的时候，会重新执行方法，也就是会重新构造一个函数。

import React, { useCallback } from 'react';

function MyComponent() {
  const handleClick = useCallback(() => {
    // handle the click event
  }, []);

  return <MyChild onClick={handleClick} />;
}

看一下上面的这段代码，当组件重绘的时候，不使用 useCallback 的时候就会重新生成一个 handleClick 方法，虽然方法是一模一样的，但是它确实是重新生成了。

如果函数方法非常复杂耗时很长的话就会产生性能问题,所以就有了useCallback，我在群里也有问过，德巨和另外一个扫地憎级（不好意思我忘记叫啥了）的大佬回答了我这一问题。

德巨说的是：当xxxx改变的时候我这个函数才重新创建

非常通俗易解

后记

可能我的理解还有很多不到位的地方，上面我有提到有一篇文章给我带来了困扰是这段话

上面的例子中，如果不用useCallback, 任何一个输入框的变化都会导致另一个输入框重新渲染。

这段话没有问题，但是出现在了不适当的位置。。

他应该说的是：“任何一个输入框的变化，都会导致另一个输入框中的onChange事件重新创建”合适一些。

因为直接说重新渲染，我不知道这和useCallback有什么关系？

React 阻止事件冒泡

发表于 2021-04-30 分类于 React
本文字数： 366 阅读时长 ≈ 1 分钟

需求

阻止事件冒泡

解决方法

<Link
  onClick={(event: {
    preventDefault: () => void,
    stopPropagation: () => void,
    nativeEvent: { stopImmediatePropagation: () => void },
  }) => {
    event.preventDefault();
    event.stopPropagation();
    event.nativeEvent.stopImmediatePropagation();
    onSelect(item);
  }}
>
  {item.operationName}
</Link>