react相关知识

jsx防注入攻击：

• React DOM在渲染之前默认会过滤所有传入的值。它可以确保你的应用不会被注入攻击。所有的内容在渲染之前都被转换成了字符串。这样有效的防止XSS(跨站脚本)攻击。

2React 元素是不可变对象。

• 一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的 UI。根据我们已有的知识，更新 UI 唯一的方式是创建一个全新的元素，并将其传入 ReactDOM.render()。

3组件名称必须以大写字母开头。

• 我们建议从组件自身的角度命名 props，而不是依赖于调用组件的上下文命名。
• 所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

正确使用State
1.不要直接修改state
2.state的更新可能是异步的
因为 this.props 和 this.state 可能会异步更新，所以你不要依赖他们的值来更新下一个状态。
要解决这个问题，可以让 setState() 接收一个函数而不是一个对象。这个函数用上一个 state 
作为第一个参数，将此次更新被应用时的 props 做为第二个参数：
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));
3.state的更新会被合并

4react 中this绑定

5 事件处理

JavaScript函数中的this不是在函数声明的时候定义的，而是在函数调用（即运行）的时候定义的.
对于必须显示绑定的解释说明

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // 为了在回调中使用 `this`，这个绑定是必不可少的
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

5this指向

6受控组件

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('提交的名字: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          名字:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="提交" />
      </form>
    );
  }
}

7React哲学

最好将渲染 UI 和添加交互这两个过程分开。这是因为，编写一个应用的静态版本时，往往要编写大量代码，而不需要考虑太多交互细节；添加交互功能时则要考虑大量细节，而不需要编写太多代码。所以，将这两个过程分开进行更为合适。我们会在接下来的代码中体会到其中的区别。
即使你已经熟悉了 state 的概念，也完全不应该使用 state 构建静态版本。state 代表了随时间会产生变化的数据，应当仅在实现交互时使用。所以构建应用的静态版本时，你不会用到它。
你可以自上而下或者自下而上构建应用：当你的应用比较简单时，使用自上而下的方式更方便； 对于较为大型的项目来说，自下而上地构建，并同时为低层组件编写测试是更加简单的方式。

8React生命周期

相比旧的生命钩子废弃了三个，新增了两个。
使用getDerivedStateFromProps(nextProps, prevState)的原因：
旧的React中componentWillReceiveProps方法是用来判断前后两个 props 是否相同，如果不同，则将新的 props 更新到相应的 state 上去。在这个过程中我们实际上是可以访问到当前props的，这样我们可能会对this.props做一些奇奇怪怪的操作，很可能会破坏 state 数据的单一数据源，导致组件状态变得不可预测。

而在 getDerivedStateFromProps 中禁止了组件去访问 this.props，强制让开发者去比较 nextProps 与 prevState 中的值，以确保当开发者用到 getDerivedStateFromProps 这个生命周期函数时，就是在根据当前的 props 来更新组件的 state，而不是去访问this.props并做其他一些让组件自身状态变得更加不可预测的事情。

使用getSnapshotBeforeUpdate(prevProps, prevState)的原因：
在 React 开启异步渲染模式后，在执行函数时读到的 DOM 元素状态并不总是渲染时相同，这就导致在 componentDidUpdate 中使用 componentWillUpdate 中读取到的 DOM 元素状态是不安全的，因为这时的值很有可能已经失效了。

而getSnapshotBeforeUpdate 会在最终的 render 之前被调用，也就是说在 getSnapshotBeforeUpdate 中读取到的 DOM 元素状态是可以保证与componentDidUpdate 中一致的。

9VScode快捷键

rcc  创建类组件 
rfc  创建函数组件

10React传输数据过多

11生成Id库 nanoid

12高阶函数

如果一个函数符合下面２个规范中的任何一个，那该函数就是高阶函数：
１.若A函数，接收的参数是一个函数，那么Ａ就是高阶函数。
2.若A函数，调用的返回值依然是一个函数，那么A就是高阶函数。

函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编程形式。

13react发送ajax请求

不建议在React中使用jQuery
axios

14消息订阅-发布机制

工具库：PubSubJS

15请求资源的另一种方式fetch与xhr并列

https://segmentfault.com/a/1190000003810652

16redux

17hooks

18 context

19 合成事件

https://blog.csdn.net/qq_36380426/article/details/109962385

目的：

1.进行浏览器兼容，实现更好的跨平台
2. 避免垃圾回收
事件对象可能会被频繁创建和回收，因此 React 引入事件池，在事件池中获取或释放事件对象。即 React 事件对象不会被释放掉，而是存放进一个数组中，当事件触发，就从这个数组中弹出，避免频繁地去创建和销毁(垃圾回收)。
3.方便事件统一管理和事务机制

20 路由

路由的基本使用

#后面的资源都不会发送给后台服务器 hashroute

路由组件与一般组件

NavLink用法

switch用法

switch包裹后匹配道就不会继续向下匹配

解决多级路径刷新页面样式丢失的问题

路由的严格匹配与模糊匹配

1.默认使用的是模糊匹配（简单记:【输入的路径】必须包含要【匹配的路径】，且顺序要一致)
2.开启严格匹配 : < Route exact={true} path="/about" component={About}/>
3.严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由

redirect的使用

1.一般写在有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由
2.具体编码:
< Switch>
< Route path=" / about" component={About}/>< Redirect to="/about" />
</ Switch>

嵌套路由

1.注册子路由时要写上父路由的path值i
2.路由的匹配是按照注册路由的顺序进行的

向路由组件传递参数

编程式路由导航

BrowserRouter与HashRouter的区别