有个需求，让视频消失在视图中时停止播放，遂研究起了元素在视图内的可见性。 技术准备 全新的api window.IntersectionObserverEntry可以用于观察元素在视图屏幕区域的可见性，详见MDN。 每当元素与屏幕产生区域交叉时，该函数被触发，并返回交叉区域参数。 滚动监听技术 如果不支持上述的api，就要考虑滚动事件监听实现，每次滚动时就计算元素边缘与视图屏幕的相对关系，以此来判断元素在屏幕上的可视范围。 技术实现 为了实现该功能，你需要做以下工作： 1. window.IntersectionO…
Audio 标签属性: 设置 preload="auto" 设置 currentTime 移动端IOS在设置currentTime 时，会存在异常。具体来说，只有在音频可播放时，才能设置时间。 而可播放的判断则是监听canplay事件，该事件的触发在ios和安卓上也有所区分，安卓是页面一加载就触发，ios是play播放之后触发。这给我们写代码造成了不小的麻烦。所以我采用以下办法： /** * ios/安卓音频设置音频开始时间兼容处理,ios要play之后才能设置 * @param {Elemen…
hooks 是向后兼容的。此页面提供了有经验的React用户对Hooks的概述。这是一个快节奏的概述。 state Hooks 此示例呈现计数器。单击该按钮时，它会递增值： import React, { useState } from 'react'; function Example() { // 声明一个state：count ，初始值是0 const [count, setCount] = useState(0); return ( <div> <p>You cl…
Hooks 是 React v16.8 加入的新特性，它可以让你使用 state 和其他特性，而不用类组件。 import React, { useState } from 'react'; function Example() { // 声明一个 state const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onC…
前面的例子介绍了Hooks的例子： import React, { useState } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times<…
effect hooks 可以让你在函数组件中实现副作用： import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); // 与 componentDidMount componentDidUpdate类似: useEffect(() => { // 更新文档标题 document.title = `You clicked ${…
Hooks 是js函数，但是使用时你需要遵循下面两条规则。我们提供了专门的检测插件来强制使用这些规则： 在最顶层调用 Hooks 不要在循环，条件，或者嵌套函数内部调用hooks。 你应该在React函数组件的最顶层调用。这样做，能确保每次组件渲染时都以相同的顺序调用Hook。这是React能在在多个useState和useEffect调用之间正确保留Hook状态的原因。 只在React函数组件中使用 不要在普通JS函数中使用。 你应该： 在函数组件中调用 在自定义hooks中调用 这样做能确保组件中的所有有状态逻…
建立自己的hooks，可以让你把组件逻辑提取到可复用的函数内。 看看在学习effect时我们举的订阅朋友状态的例子： import React, { useState, useEffect } from 'react'; function FriendStatus(props) { const [isOnline, setIsOnline] = useState(null); function handleStatusChange(status) { setIsOnline(status.isO…
本页面介绍了React Hooks 的所有API 。 如果是新了解Hooks，可以先看之前的页面。您还可以在FAQ部分找到有用的信息。 基础 API useState useEffect useContext 额外的 API useReducer useCallback useMemo useRef useImperativeHandle useLayoutEffect useDebugValue 基础 API useState const [state, setState] = useState(initialS…