React/js 实用技巧和窍门 - 第一部分

大家好。这是我的第一篇博文。我就不无聊地介绍自己了。如果你们感兴趣的话，我会把它放在最后。

开始小贴士吧😄

0. [React] 如果你还没有使用 Hooks，那就使用它们吧

我加了这条是因为我知道你可能不这么认为。我个人觉得，如果一个 2MB 的项目是用类组件写的，我会用 Hooks 重构它。不过话说回来，我又有什么资格评判呢？除非你真正理解 Hooks 的强大功能，否则先别急着看这篇文章。

1. [React] useState 类似 useReducer - 选择性

我实际上是在浏览社区的 React 帖子时看到这个的，只不过帖子里用起来好像没什么用——而我感觉自己挖到了一座金矿，立刻就把它应用到了我的日常编码习惯中。
先介绍一下背景信息：useReducer（依我拙见）基本上是对 useState 的一个封装，以确保你不会像下面这样同时设置多个状态并引发多次重新渲染。

//  imports etc...
//  ...
const aFunction = (var1, var2, someCondition) => {
    if(someCondition === "something") {
        setAState(var1)
        setBState(var2)
    } else {
        setAState(var1)
    }
    //  you get the point
}

我喜欢毫无意义的多次重新渲染的味道

useReducer很好地封装了上述代码，确保两者可以在一次重新渲染中完成。
但是，对于每种 useState 情况，我们都必须定义 action 类型、reducer 以及所有那些在 redux 中令人厌烦的操作。而且，当你想减少一次重新渲染时，代码会变得有点臃肿和繁琐。所以，以下是要点。

//  imports
//  ...
const [reducerAlt, setReducerAlt] = useState({});

const handleState = vals => {
    if(vals.isReducer === true && _.isObject(vals.action)) {
        if(vals.action.type === undefined) throw new Error("action type is not defined")
        const valsCopy = {...vals, isReducer: undefined, action: undefined};
        switch(vals.action.type) {
            // do reducer things with valsCopy we're not bothered to and use it to set state.
        }
        return;
    }
    setReducerAlt(prev => ({...prev, ...vals}));
}

//  nice and simple
const aFunction = (var1, var2, someCondition) => {
    if(someCondition === "something") {
        handleState({aState: var1, bState: var2});
    } else {
        handleState({aState: var1});
    }
}

不确定我这段代码写得有多好，因为我是直接用 Markdown 写的，但你应该能理解它的要点。需要的时候可以像 Reducer 一样用，如果不介意的话，只需用值覆盖状态即可。
没错，这种方法容易出错，但我相信我们都能自己添加错误处理，不会有什么问题……对吧？

2. [React，也可能是 JS] 三元运算符很吸引人，但可读性不高。Switch 语句太长了。所以呢？

我就随便说说吧。当我发现这真的可行时，我都惊呆了。现在有好多地方需要修复。

const aSwitchCase = gotItFromSomewhere();

return (
    <>
        {
            {
                case1: <Component1 />
                case2: <Component2 />
                case3: <Component3 />
                case4: SomeFunctionThatReturnsAComponent()
                case5: "yeah anything it's an object and the 'aSwitchCase' is referencing the property"
                "undefined": () => throw Error("Havent' really tried this one but I think it'll work maybe? Please comment if it doesn't I'll delete this.")
                "null": () => throw Error("ditto above")
            }[`${aSwitchCase}`]
        }
    </>
)

简单提一下，我认为三元运算符也很棒，只要与布尔值一起使用就能正常工作。但我认为，如果你正在做类似这样的事情，上面的例子会更好。

const something = fromSomething();
return (
    <>
        {something === "a" ? <a /> : something === "b" ? <b /> : something === "c" ? <c /> : undefined : undefined : undefined}
    </>
)
//  yeah it's usually longer and much more unreadable. But this alone is difficult to read which proves my point.

或者这个

const something = fromSomething()
switch something {
    case "a":
        return <a />;
    case "b":
        return <b />;
    case "c":
        return <c />;
    default:
        throw new Error("well not infinitely better I agree");
}

当谈到代码可读性时，最终的代码片段可能更“可读”，
但对于像我这样喜欢在一行中强制尽可能多的逻辑的人来说，只要它是“可读的” - 这种方法是天赐之物。

[反应] 3. 我与视频中的人或公司没有任何关系，但......

如果你对 React 优化感兴趣，并且理解英式英语没有困难，
可以看看这个。
我花了大约两周时间浏览和阅读了好几篇关于在 DevTo 上优化 React 的文章，但这个视频几乎在所有方面都更胜一筹，同时也更具信息量。我个人更愿意再看一遍这个视频，而不是喜剧小品——它真的太好笑了（对我来说）。

[JS] 4. 为什么要使用 lodash 之类的模块

我非常喜欢 lodash。不过以前可不是。直到这件事发生了。

const somethingAmazing = (var) => {
    if(typeof var !== 'object') throw new Error("not an object");
    // do stuff
    return "did stuff"
}

somethingAmazing(null); // not a bloody error

原来'null' 是一个 object。（这显然是 js 如此流行的原因）
这看起来像一个简单的错误，但如果它嵌套在多个组件中，快速通过 redux 处理，你只会得到一些看似毫无关联的奇怪错误，因为你的整个逻辑都依赖于 'var' 不为 null ——如果 JS 和整个宇宙都试图搞砸你（一如既往），这可能需要几个小时来调试。
如果你在意自己的理智，那就使用像 lodash 这样的库吧。

const somethingAmazing = (var) => {
    if(!_.isObject(var)) throw new Error("not an object");
    // do stuff
    return "did stuff"
}

somethingAmazing(null); // yes error

总结

我本来打算至少写出 5 条我学到的技巧，但我太累了（现在是凌晨 2 点半）。也许我会回来写第二部分。谁知道呢。希望你从这篇文章中学到一些有用的东西。加油——继续写代码。

PS：非常感谢您的任何反馈，这‘可能’会激励我完成第二部分。

文章来源：https://dev.to/fly/useful-tips-and-tricks-react-js-part1-1kjh