解决粘性定位的一些问题

发表于 2021-11-27 更新于 2023-11-22 本文字数： 276 阅读时长 ≈ 1 分钟

下面是一个正常工作的粘性定位的例子，当你滚动页面，sticky part1 和 sticky part2 会固定在页面顶部。

阅读全文 »

当flex-1没有按预期工作

发表于 2021-09-29 更新于 2023-11-22 本文字数： 456 阅读时长 ≈ 2 分钟

写duozhuavue💚服装搜索页面时遇到了一个问题：flex 容器内，两个设置了 flex：1 的项目，最后宽度竟然不是相等的。

阅读全文 »

消失的XXX

发表于 2020-12-30 更新于 2023-11-22 本文字数： 319 阅读时长 ≈ 1 分钟

消失的播客

2020年听到一半被下架的播客。

阅读全文 »

styled-components + form小问题

发表于 2020-09-01 更新于 2023-11-22 本文字数： 176 阅读时长 ≈ 1 分钟

异常代码：

// 表单不能输入值
const SignUp = props => {
  const Wrapper = styled.div`
    border: 1px solid #f5f4f0;
    max-width: 500px;
    padding: 1em;
    margin: 0 auto;
  `;

  const Form = styled.form`
    label,
    input {
      display: block;
      line-height: 2em;
    }

    input {
      width: 100%;
      margin-bottom: 1em;
    }
  `;

  return (
    <Wrapper>
      <h2>Sign Up</h2>
      <Form
        onSubmit={...}
      >
        <label htmlFor="username">Username:</label>
        <input />
        <label htmlFor="email">Email:</label>
        <input />
        <label htmlFor="password">Password:</label>
        <input />
        <Button type="submit">Submit</Button>
      </Form>
    </Wrapper>
  );
};

将 styled-components 部分的代码放在组件的外部，代码就正常了…

官方说明

It is important to define your styled components outside of the render method, otherwise it will be recreated on every single render pass. Defining a styled component within the render method will thwart caching and drastically slow down rendering speed, and should be avoided.

尤其在处理表单时，如果每输入一个字符就re-render组件，的确会很奇怪。