通过vue学习react(四) - watch,computed,slot等功能

这些功能都比较简单些, 通过react hooks和react class都进行了实现

喜欢就点赞呗

react 实现 watch

react hook 实现 watch

function useWatch<T>(deps: T, handler: (next: T, prev: T) => void, immediate = false) {
  let nextRef = useRef<T>();
  const isImmediate = useRef(true);

  useEffect(() => {
    if (isImmediate.current) {
      handler(nextRef.current as T, deps);
    } else {
      isImmediate.current = true;
    }
    return () => {
      nextRef.current = deps;
    };
  }, [deps]);
}
# 使用
let [count, setCount] = useState(0);
useWatch(count, (next: typeof count, prev: typeof count) => {
    console.log(next, prev);
});

react 类写法 实现 watch

class Watch extends React.Component {
  state = { count: 0 };
  constructor(props: FC) {
    super(props);
  }
  setCount() {
    this.setState({
      count: this.state.count + 1,
    });
  }

  componentDidUpdate(_prev: any, prevState: typeof this.state) {
    console.log(prevState.count, this.state.count);
  }

  render() {
    return (
      <div>
        <button onClick={this.setCount.bind(this)}>按钮</button>
      </div>
    );
  }
}

react 实现 插槽(slot)

react hooks版本

function Child({ children }: { children: React.ReactNode }) {
  return (
    <div>
      child
      {children}
    </div>
  );
}

export default function Slot() {
  return (
    <div>
      <Child>
        <p>2333</p>
      </Child>
    </div>
  );
}

react 类写法

class Child extends React.Component {
  render() {
    const { children } = this.props;
    return (
      <div>
        child
        {children}
      </div>
    );
  }
}

class Name extends React.Component {
  constructor(props: React.FC) {
    super(props);
  }

  render() {
    return (
      <Child>
        <p>2333</p>
      </Child>
    );
  }
}

react 实现 computed

react hooks版本

通过useMemo模拟即可

export default function Computed() {
  let [count, setCount] = useState(0);
  const getCount = useMemo(() => {
    return count * 2;
  }, [count]);
  return (
    <div>
      {getCount}
      <button
        onClick={() => {
          setCount(count + 1);
        }}>按钮
      </button>
    </div>
  );
}

react 类写法

原理则是每次setState都会触发render, 然后重新获取newCount

class Name extends React.Component {
  state = { count: 0 };
  constructor(props: React.FC) {
    super(props);
  }
  get newCount() {
    return this.state.count + 1;
  }

  render() {
    return (
      <div>
        <p>{this.newCount}</p>
      </div>
    );
  }
}

react 实现 v-model

react hooks版本

interface formProps {
  name?: string;
  age?: string;
}

export default function Model() {
  const [form, setForm] = useState<formProps>({});
  const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>, key) => {
    setForm((raw) => ({ ...raw, [key]: e.target.value }));
  }, []);
  function onClick() {
    console.log(form);
  }
  return (
    <div>
      <input type="text" value={form.name ?? ""} onChange={(e) => handleChange(e, "name")} />
      <input type="text" value={form.age ?? ""} onChange={(e) => handleChange(e, "age")} />
      <button onClick={onClick}>按钮</button>
    </div>
  );
}

react 类写法

interface formProps {
  name?: string;
  age?: string;
}
class Model extends React.Component<unknown, { form: formProps }> {
  constructor(props: React.FC) {
    super(props);
    this.state = { form: {} };
  }
  handleChange(e: React.ChangeEvent<HTMLInputElement>, key: string) {
    this.setState({
      form: { ...this.state.form, [key]: e.target.value },
    });
  }

  onClick = () => {
    console.log(this.state.form);
  };

  render() {
    const { form } = this.state;
    return (
      <div>
        <input type="text" value={form.name ?? ""} onChange={(e) => this.handleChange(e, "name")} />
        <input type="text" value={form.age ?? ""} onChange={(e) => this.handleChange(e, "age")} />
        <button onClick={this.onClick}>按钮</button>
      </div>
    );
  }
}

react 实现 css scoped

css module

# index.module.css
.app {
  color: aqua;
  flex: 1;
}
# Css.tsx
import Style from "./index.module.css";
export default function Css() {
  return (
    <div>
      <p className={Style.app}>我是一个字段</p>
    </div>
  );
}

css in js (emotion)

安装

npm i @emotion/styled @emotion/react  

使用

/* @jsxImportSource @emotion/react */
import styled from "@emotion/styled";
import { css } from "@emotion/react";
import Style from "./index.module.css";
const base = css`
  color: #ee298c;
`;
const Container = styled.div`
  padding: 23px;
  &:hover {
    color: ${(props) => props.color};
  }
`;
export default function Css() {
  return (
    <Container color="blue">
      <p className={Style.app}>我是一个字段</p>
      <p
        css={css`
          ${base};
          background-color: #eee;
        `}
      >
        test
      </p>
      <p className="test">23333</p>
    </Container>
  );