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
        ;
      
    )
  }
}

点击父组件更新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处理！
比如，常见操作，根据接口获取数据后渲染页面。这种行为并不是组件主动发起的行为，而是一种被动行为。