react冷门小知识

1. react合成事件 SyntheticEvent(React 17和老版本对比)

React 17 以前

React在原生的DOM事件上封装了一层,称为SyntheticEvent(合成事件)。所有事件都会冒泡到根节点 - document上,然后进行后续处理。

事件绑定根节点
  • 优势1:兼容各类浏览器的Dom事件
  • 优势2:事件池。

事件池中装满了SyntheticEvent对象,需要时池中取出使用,用完后再放回池中,这就意味着 SyntheticEvent对象可以被缓存且反复使用。目的是提高性能,减少创建不必要的对象。

当调用事件回调函数之后,合成对象上的所有属性重置为null,但是合成事件对象依旧存在。

因此,写React事件回调函数的时候不能将 event 用于异步操作 —— 当异步操作真正执行的时候,SyntheticEvent对象有可能已经被重置了。

import React, { Component } from "react";

class TextInput extends Component {
  state = {
    counter: 0,
    value: this.props.defaultValue,
  }
  // 由于 setState 是异步操作,event.target.value 在运行时可能已经被重置了
  handleChange = event => 
    this.setState(prevState => ({ value: event.target.value, counter: prevState.counter + 1 }));

  render() {
    return (
      Edited {this.state.editionCounter} times
      
    )
  }
}

一般有两种解法:

  1. 使用 event.persist() 持久化合成事件:将当前event挪出事件池,从而该event属性值可以一直存在而不会被重置。
    • 缺点:放弃了SyntheticEvent事件复用能力,不推荐
  2. 缓存所需的event属性值
    • 缺点:代码略啰嗦。但是,推荐
import React, { Component } from "react";

class TextInput extends Component {
  state = {
    counter: 0,
    value: this.props.defaultValue,
  }
  
  handleChange = event => {
    const value = event.target.value; // value这个本地变量已经保存了目标值
    this.setState(prevState => ({ value, editionCounter: prevState.counter + 1 }));
  }

  render() {
    return (
      Edited {this.state.editionCounter} times
      
    )
  }
}

如要想要阻止冒泡,不要直接调用原生e.stopPropagation()方法,没用的。
利用合成事件上的nativeEvent访问到原生事件,再调用nativeEvent.stopImmediatePropagation方法。
https://developer.mozilla.org/zh-CN/docs/Web/API/Event/stopImmediatePropagation

React 17

变化1:事件绑定将从document下移到root节点,

事件绑定root点

变化2:Web 端的 React 17 不使用事件池(https://zh-hans.reactjs.org/docs/legacy-event-pooling.html)。由于 SyntheticEvent 不再放入事件池,e.persist() 将不再生效。
为什tReact 17 废弃了事件复用机制呢?因为在现代浏览器下这种性能优化没有意义,反而给开发者带来了困扰

2. 加了key就一定好吗?(此知识点React和Vue通用)

渲染列表时,大家都知道要加key值,为什么呢?为了配合diff算法做性能优化呀?

那么如果是纯文字改动呢?

  • 1
  • 2
  • 3
  • 4
// 更新为
  • 1
  • 3
  • 4
  • 5

如果指定了key,需要做移动,删除,新增,三种操作。但是,我们仅仅更新个textContent,需要这么大动作吗?
那就不要指定key好了,React(或者Vue)会复用原DOM节点,只做textContent更新而已,性能明显更好。

当然,如果节点上绑定了事件,且事件和节点内容相关,那么请务必小心,为了不必要的Bug,还是建议加上key

3. 不要直接将prop赋值给state

场景:子组件用props初始化state数据。

3.1 先看看class模式的案例代码:

class Child extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      list: props.list
    }
  }

  render() {
    return (
      
{this.state.list.map((item, index) => { return

Hello, {item.name}

})}
) } } class Parent extends React.Component { constructor(props) { super(props) this.state = { list: [{ name: 'lily' }, { name: 'bob' }] } } handleCilck = () => { this.setState({ list: this.state.list.concat([{ name: 'parent' }]) }) } render() { return (
;
) } }

点击父组件更新state按钮,子组件的列表会更新吗?
当然是No。因为子组件的constructor只会在初始化时运行,所以更新阶段是不会对state重新复制。
解决方案也比较简单,利用componentWillReceiveProps钩子函数触发子组件state更新。

componentWillReceiveProps(props) {
    this.setState({
      list: props.list
    })
}

3.2 useState开发模式

function Component (props) => {
    const [name, setName] = useState(props.name)
    console.log(name) 
}

同样的,如果props更新,子组件依旧用第一次的值来渲染。
可以利用uesEffect解决这个问题:

function Component (props) => {
    const [name, setName] = useState(props.name)
    useEffect(() => {
       setName(props.name)
    }, [props.name])
}

4. 如何在不添加依赖的情况下也能获取到最新值呢?(Hook)

答案:利用setXXX 函数回调模式。

useEffect(() => {
  const id = setInterval(() => {
    setCount(c => c + 1); // 划重点
  }, 1000);
  return () => clearInterval(id);
}, []);

一个依赖参数好解决,如果多个依赖参数怎么办?
答案:用useReducer吧。

import React, { useReducer, useEffect } from "react";

const initialState = {
  count: 0,
  step: 1,
};

const reducer = (state, action) {
  const { count, step } = state;
  if (action.type === 'tick') {
    return { count: count + step, step };
  } else {
    throw new Error();
  }
}
// 计数器组件
function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  const { count, step } = state;

  useEffect(() => {
    const id = setInterval(() => {
      dispatch({ type: 'tick' });
    }, 1000);
    return () => clearInterval(id);
  }, [dispatch]);

  return (
      

{count}

); }

5. 什么时候应该用useEffect

React组件有两个重要的概念:

  • Rendering code 渲染代码
  • Event handlers 事件处理器,其包括
    • 更新 input等输入框
    • 提交表格
    • 导航到其它页面

看下例子:

function App() {
  const [name, update] = useState('KaSong');
  
// Event handlers
  const changeName = () => {
    update('hello world');
  }
  
// Rendering code + Event handlers
  return 
Hello {name}
; }

一个纯组件,仅仅只包含Rendering code
Event handlers是「组件内部包含的函数」,用于执行用户操作。
目前为止,组件都没有用到useEffect

那什么样的行为,必须用useEffect处理呢?
在视图渲染后触发的副作用,就属于effect,应该交给useEffect处理!
比如,常见操作,根据接口获取数据后渲染页面。这种行为并不是组件主动发起的行为,而是一种被动行为。

你可能感兴趣的:(react冷门小知识)