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

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

喜欢就点赞呗

react 实现 watch

react hook 实现 watch

function useWatch(deps: T, handler: (next: T, prev: T) => void, immediate = false) {
  let nextRef = useRef();
  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 (
      
); } }

react 实现 插槽(slot)

react hooks版本

function Child({ children }: { children: React.ReactNode }) {
  return (
    
child {children}
); } export default function Slot() { return (

2333

); }

react 类写法

class Child extends React.Component {
  render() {
    const { children } = this.props;
    return (
      
child {children}
); } } class Name extends React.Component { constructor(props: React.FC) { super(props); } render() { return (

2333

); } }

react 实现 computed

react hooks版本

通过useMemo模拟即可

export default function Computed() {
  let [count, setCount] = useState(0);
  const getCount = useMemo(() => {
    return count * 2;
  }, [count]);
  return (
    
{getCount}
); }

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 (
      

{this.newCount}

); } }

react 实现 v-model

react hooks版本

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

export default function Model() {
  const [form, setForm] = useState({});
  const handleChange = useCallback((e: ChangeEvent, key) => {
    setForm((raw) => ({ ...raw, [key]: e.target.value }));
  }, []);
  function onClick() {
    console.log(form);
  }
  return (
    
handleChange(e, "name")} /> handleChange(e, "age")} />
); }

react 类写法

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

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

  render() {
    const { form } = this.state;
    return (
      
this.handleChange(e, "name")} /> this.handleChange(e, "age")} />
); } }

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 (
    

我是一个字段

); }

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 (
    
      

我是一个字段

test

23333

);

你可能感兴趣的:(通过vue学习react(四) - watch,computed,slot等功能)