React学习笔记

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:组件判断是否重新渲染调用