收集了很多关于React的面试题,有的山月试着答了一下,有的没有,待续补充。
新人入职新上手项目,如何把它跑起来,这是所有人都会碰到的问题:所有人都是从新手开始的。
CI/CD
,如果有跟着 CI/CD
部署的脚本跑命令dockerfile
,如果有跟着 dockerfile
跑命令npm run dev/npm start
依我的看法,React hooks
主要解决了状态以及副作用难以复用的场景,除此之外,他对我最大的好处就是在 Console
中不会看到重重叠叠相同名字的组件了(HOC)。
目前使用感觉最爽的两个hook,都是关于请求的。一个是 apollo-client
的 useQuery
,一个是 swr。
长按识别二维码查看原文
https://github.com/zeit/swr标题:swr
更多描述: 如何使用 react hooks 实现最简单一个计数器的组件为了保证最最简单化,不需要暂停与开始状态
React.cloneElement(
element,
[props],
[...children]
)
React.createElement(
type,
[props],
[...children]
)
直接上 API,很容易得出结论:首参不一样。这也是他们的最大区别:
cloneElement
,根据 Element 生成新的 ElementcreateElement
,根据 Type 生成新的 Element然而,此时估计还是云里雾里,含糊不清,需要弄清它,首先要明白俩概念
更多描述: 比如设计成 `useFetch` 这种形式,它的 API 应该如何设计
可以参考 How to fetch data with React Hooks?
长按识别二维码查看原文
https://www.robinwieruch.de/react-hooks-fetch-data标题:How to fetch data with React Hooks?
参考: https://www.robinwieruch.de/react-fetching-data#how-to-fetch-data-in-render-props
Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
在以前, react
中所有的组件都会位于 #app
下,而使用 Portals
提供了一种脱离 #app
的组件。
因此 Portals
适合脱离文档流(out of flow) 的组件,特别是 position: absolute
与 position: fixed
的组件。比如模态框,通知,警告,goTop 等。
以下是官方一个模态框的示例,可以在以下地址中测试效果 https://codepen.io/gaearon/pen/jGBWpE?editors=1010
<html>
<body>
<section id="app"></section>
<section id="modal"></section>
<section id="gotop"></section>
<section id="alert"></section>
</body>
</html>
const modalRoot = document.getElementById('modal');
class Modal extends React.Component {
constructor(props) {
super(props);
this.el = document.createElement('section');
}
componentDidMount() {
modalRoot.appendChild(this.el);
}
componentWillUnmount() {
modalRoot.removeChild(this.el);
}
render() {
return ReactDOM.createPortal(
this.props.children,
this.el,
);
}
}
数据与UI的进一步分离,这样也更有利于 SSR
更多描述: 可以实现如下 API
message.info()
message.success()
在 useEffect
,把第二个参数即依赖的状态,设置为 []
useEffect(callback, [])
不可以,created/componentWillMount 时,还未挂载,代码仍然在服务器中执行,此时没有浏览器环境,因此此时访问 localStorage 将会报错
我们把全局store分为两块
model
,此时可以使用 swr
直接替代。或者封装一个 useModel
,如 useUser
,usePermission
useReducer
和 useContext
来替代可以参考官方文档 https://reactjs.org/docs/hooks-custom.html
自定义一个 hook
仅仅是一个以 use
打头,组合 useState
和 useEffect
或者其它 hooks
的一个普通函数
function useEffect(effect: EffectCallback, deps?: DependencyList): void;
type EffectCallback = () => (void | (() => void | undefined));
根据文档及 ts 的提示来看,useEffect
的回调参数返回的是一个清除副作用的 clean-up
函数。因此无法返回 Promise
,更无法使用 async/await
useEffect(() => {
const subscription = props.source.subscribe();
return () => {
// Clean up the subscription
subscription.unsubscribe();
};
});
「此时可以选择再包装一层 async 函数,置于 useEffect 的回调函数中,变相使用 async/await」
async function fetchMyAPI() {
let response = await fetch('api/data')
response = await res.json()
dataSet(response)
}
useEffect(() => {
fetchMyAPI();
}, []);
更多描述:
function App() {
const [count, setCount] = useState(0);
const incr = () => {
setTimeout(() => {
setCount(count + 1);
}, 3000);
};
return <h1 onClick={incr}>{count}</h1>;
}
当连续点击 10 次时,会输出多少
更多描述:
import React, { memo, useMemo, useState } from "react";
const Heading = memo(({ style, title }) => {
console.log("Rendered:", title);
return <h1 style={style}>{title}</h1>;
});
export default function App() {
const [count, setCount] = useState(0);
const normalStyle = {
backgroundColor: "teal",
color: "white",
};
const memoizedStyle = useMemo(() => {
return {
backgroundColor: "red",
color: "white",
};
}, []);
return (
<>
<button
onClick={() => {
setCount(count + 1);
}}
>
Increment {count}
</button>
<Heading style={memoizedStyle} title="Memoized" />
<Heading style={normalStyle} title="Normal" />
<Heading title="React.memo Normal" />
</>
);
}