React框架 关键梳理

React中文文档

JSX

• 包含特定格式的代码片段，因为规范到这个圈子里，可以针对性做些处理，比如XSS攻击，结果上·等同于    React.createElement
  

• 由于 JSX 会编译为 React.createElement 调用形式，所以 React 库也必须包含在 JSX 代码作用域内   import 'react'
  

• 用户自定义的组件必须以大写开头 | 小写会被认定为 HTML 内置组件   import 'react'
  

元素渲染

• ReactDOM可以看成是浏览器真实DOM的毒液，ReactDOM创建元素对比之前的元素，定点修复部位(浏览器的DOM)              
  

• ReactDOM.render返回真实的DOM元素
  

组件&Props：独立可复用的代码片段(毒液细胞群)

• 函数组件/class组件： 返回的都是 DOM 元素(毒液细胞),React DOM将 DOM 高效的更新 。 处理的函数不能处理 props(传入的参数，这种不修改入参的函数叫做 ‘纯函数’)                  
  

• 只有class组件才能添加 `生命周期方法` ， 函数组件通过钩子实现                  
  

• 出于性能考虑可能会把多个 setState() 合并成一个调用，执行setState后state的更新可能是异步的，依赖state与props来更新状态不一定拿到最新的状态，传入函数的话，函数是作为更新成功的回调函数执行，其参数为最新的state**（异步、浅合并(覆盖性合并)、单向数据流）**，props
  

事件处理

•  React 事件名采用小驼峰式（HTML大小写不敏感）
  

•  React 不能通过返回 false 阻止默认行为，必须显示使用 e.preventDefault 
  

•  JSX 回调函数中的 this，在 JavaScript 中，class 的方法默认不会绑定 this                           
  

  1. bind方法：constructor(){ this.handleClick = this.handleClick.bind(this);}
  2. class fields 语法： handleClick = () => {console.log('this is:', this);} onClick={this.handleClick}>
  3. 箭头函数：onClick={() => this.handleClick()},存在额外渲染的性能问题

条件运算符

• {渲染条件 && 对应渲染组件}   {渲染条件 ? 组件1 : 组件2  }
  

• 隐藏组件：return null
  

列表 & key

• key位置需要就近，放在每一项的顶级组件上，只需要在兄弟节点保持唯一即可
  

• key只会传给React，提取组件不会获得key，需要key值可以绑定到其它的属性上，如id
  

function NumberList(props) {
    const numbers = props.numbers;
    return (
      <ul>
        {numbers.map((number) =>
          <ListItem key={number.toString()}
                    value={number} />
        )}
      </ul>
    );
  }

状态提升：当多个组件共有唯一数据源，将数据源提升至最近父组件

• 在只需要接受显示的组件使用 props 接收即可
  

• 在可以改变的组件中，由父组件传 onChange 事件给其 props,需要改变调用传值即可
  

组合（类似Vue的插槽）、继承

• 默认插槽在 React 中以 props.children 存在               
  

• 具名插槽依据传的属性名获取
  

function Box(props) {
  return (
    <div>
        {props.top}       // 具名 top
        {props.children}  // 默认传值
        {props.bottom}    // 具名 bottom
    </div>
  );
}
function Welcome() {
    return (
      <Box top={<h1>top</h1>} bottom={<h1>bottom</h1>}>
        <h1>default内容，Box肚子内的五脏六腑</h1>
      </Box>
);}

---

踩坑环节

---

react 渲染的3种方式

react 中的 state(状态,props属性) 可以对应 vue 中的 data ,但是是单向数据传输，数据流自顶向下，组件的数据只能影响其后的组件
state 与 props 的区别：state可以交互改变，props 不可变
setState 并不会立即改变 this.state,而是创建一个即将处理的state，不一定是同步
通过{}渲染数据时，里面不能时 Object 数据，数组数据会自动展开
组件中的state直接更改(this.state.xxx = yyy)：数值会改变，但是已渲染的页面不会刷新，通过this.setState({state 新值})触发渲染页面监听的回调函数刷新页面

JSX语法的好处：

• JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
• 它是类型安全的，在编译过程中就能发现错误。
• 使用 JSX 编写模板更加简单快速。

Withrouter 作用：把不是通过路由切换过来的组件中，将react-router 的 history、location、match 三个对象传入props对象上

usestate\useEffect: useEffect可以使用多次，依次执行

import {useState , useEffect}  from 'react';
function Example(){
    const [count , setCount] = setState(0);this
// count 等同于 this.state.count  
// setState 等同于 dispatchActions  
// useEffect 在每一次 setState调用时调用，每次产生一个独立的状态  <==> 如果在class组件中，@DidMount中则需要使用闭包来获取独立的状态，不然以更新队列最后一次为准
    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    );
}

useRef \ createRef：都创建一个 ref 引用，但是createRef 每次页面刷新会重新创建

import {createRef, useRef} from 'react'
function Test1(){
    const inputFocus = useRef()
    return (
        <div ref={inputFocus}>
        </div>
)}

mount/update/unmounting => 5种生命周期钩子函数,@WillMount@DidMount@WillUpdate@DidUpdate@WillUnmount + 2 @WillReceiveProps已加载组件收到新参数@should@Update:组件判断是否重新渲染调用