这些功能都比较简单些, 通过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 (【通过vue学习react(四)|通过vue学习react(四) - watch,computed,slot等功能】{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
);
