reactjs.org
获得徽章 0
- 新问题
Q: 如何手写一个 hook?
A: 自定义的 hook 是一个 javascript 函数, 命名始于 "use", 并且可能使用其他的 hooks
```js
function useDocumentScrollTop() {
const [scrollTop, setScrollTop] = React.useState(
document.documentElement.scrollTop
);
React.useEffect(() => {
const scrollHandler = () => {
setScrollTop(document.documentElement.scrollTop);
};
document.addEventListener("scroll", scrollHandler);
return () => document.removeEventListener("scroll", scrollHandler);
});
return scrollTop;
}
```
reactjs.org
旧问题回顾
Q: redux 的三个原则是什么
A:
1. single sourch for truth 真理的唯一来源, 应用的全局状态存在一个 store 的对象树中
2. state is read-only state 是可读的. 唯一的改变 state 的方法是 emit 一个 action, 一个对象描述发生了什么
3. changes are made with pure function. 改变是由纯函数做的. 写纯 reducers 指定 state tree 是如何通过 action 改变的redux.js.org 展开赞过
评论1 - 新问题
Q: React Hooks 的限制(rule) 是什么?
A: 1. 必须用在 函数 组件的顶层, 不能用在 判断, 循环语句中, 也不能用在内嵌的函数中. 原因是 react 依赖 hook 的顺序, 需要保证每一次 render, hook 的调用顺序必须一致
2. 只能用在 函数组件中, 不能用在普通函数中. 也可以用在自定义 hook 中, 当然自定义的 hook 只能在函数组件中调用
旧问题回顾
Q: 什么是 HTML
A: HTML 是 hypertext markup language 的缩写, 是 web 最基础的组成部分, 其定义了 web 内容的含义和结构展开等人赞过 25 - 今天的文字较多, 放在文章中
新问题
Q: useEffect 这个 Hook 如何去使用?
旧问题回顾
Q: 什么是 webpack?展开评论点赞 - 新问题
Q: useState 这个 Hook 如何使用?
A:
Hooks 只能在 function 组件中使用, 不能在 class 组件中使用
useState Hook 可以让你 React state 添加进 function 组件
当你有一个函数组件, 然后你想要给它添加 state 的时候, 在之前, 你只能将其转换成 class 组件, 然后添加状态. 但是现在你可以使用 useState Hook 给 function 组件添加状态.
```js
function App () {
const [count, setCount] = React.useState(0)
return <div onClick={() => setCount(count + 1)}>{count}</div>
}
```
旧问题回顾
Q: 什么是 react-router
A: react-router 是一组导航组件, 其和你的应用程序声明式的组合在一起. 无论你是想给你的 app 提供可收藏 的 urls, 还是在 React Native 中以组合的方式导航. 无论 react 在哪里渲染, react-router 都可以工作.展开赞过 61 - Q: [高频面试题] React Hooks 为什么会被引入, 其想要解决什么问题
A:
React Hook 在 16.8 版本被引入, 它可以让你在不使用 class 的情况下使用 state 和其他 React 特性
1. 组件之间难以复用状态逻辑. 此前解决该问题的方法是 render props 个 高阶组件. 这类方式都需要重新的去组织组件结构, 如果你用 React DevTools 看一下应用, 你会发现有很多 provider, consumer, render props 和 高阶组件, 形成了嵌套地域. React Hooks 可以让你在不改变组件结构的情况下复用状态逻辑.
2. 复杂组件变得难以理解. 你可能会在 componentDidMount 和 componentDidUpdate 中发起请求来获取数据. 你可能会在 componentDidMount 中绑定事件, 然后在 componentWillUnmount 取消事件监听. 看到了吗? 绑定事件和取消绑定事件这对本来需要同步去做的事情, 被拆分到了不同的函数中, 并且绑定事件和发起请求这两个不相关的行为被放到了同一个函数里面. React Hooks 将组件中相互关联的部分拆分成更小的函数, 而非按照生命周期进行拆分.
3. class 难以理解, 你必须去理解 this 在 JavaScript 中的运作方式, 这与其他语言有着巨大差异. 没有稳定的语法提案, 这些代码非常冗余. React Hooks 使你在不使用 class 的情况下可以使用更多的 React 特性.
Note: 其实第三点我感触不深, 我对于其他语言没有太多的了解. 至于说稳定的语法提案, 有了 babel, 对于平时的使用也不会有太大的影响.展开等人赞过 317 - 看 CSS 规范看到吐, 有没有一位大佬能通俗的解释一下 line-height 这个属性.
line-height 是只影响文字吗, 图片(svg, png, jpeg) 不受影响.
也就是 line-height: 0 的话, 如果这个 line box 里面有图片, 图片是不会被裁切的, 是吗展开赞过 评论1
