react笔记

1.html文件中引入库：react、react-dom、Babel
    <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>

    ReactDom.render('',document.getElementById(''))
2.jsx(javascript+xml)
  html:react/react-dom/babel
  脚手架：webpack(babel)+模块化+react/react-dom/babel
    let info=<h2>{Math.random()}</h2>
    1)表达式
      在jsx中，可以应用在组件内容中
      <div>{msg}</div>
      可以应用在属性
      <div onClick={}></div>
    2)列表渲染
      let users=[]
      let trs=users.map(item=>{
        return (
          <tr>
            <td>{item.id}</td>
            <td>{item.name}</td>
            <td>{item.age}</td>
          </tr>
        )
      })
      let table=<table><tbody>{trs}</tbody></table>
    3)条件渲染
      let users=null;
      let div;
      if(user){
        dom=<div>{user.realname}</div>
      }else{
        dom=<div>请登录</div>
      }
3.事件
  <button onClick={this.addHandler}></button>
  onClick 区别于原生dom的事件绑定，使用驼峰式命名
  onClick 的取值可以为一个变量，该变量指向事件处理函数，该事件
  处理函数在组件函数中，必须通过this来访问
  在类组件中，事件处理函数的this默认指向undefined，可以在
  constructor中通过bind函数绑定this

  foo.call()/foo.apply()/foo.bind()

  <button onClick={()=>{this.delHandler(item.id)}}>删除</button>
  如果onClick的值为回调函数，回调函数中是真正事件处理函数调用，
  该事件处理函数的this就为当前组件实例对象

  其他：
    事件三要素：事件源、事件处理函数、事件对象
    事件流(元素的嵌套)：事件捕获(外->内)
    事件代理：将事件处理函数绑定在父元素而非子元素上
4.状态 
  constructor(){
    this.state={
      xxx
    }
  }
  this.setState
  this.state.xxx
  1)只读，不可以通过this.state.xx直接修改xx的值
  2)响应式，当xx发生变化，会引起组件的重新渲染
  3)类组件中，可以在constructor中初始化，在函数组件中通过use State hook,
  添加状态机制
  4)想要修改状态，在类组件this.setState来修改，在函数组件，通过[num,setNum]
  setNum来修改
5.组件
    1)函数组件(推荐使用)
      类似于vue中的setup，函数组件也称为无状态组件，如果想要拥有
      状态(当状态发生变化的时候，组件会重新渲染，类似于vue中的data)
      可以借助hook(钩子)。函数组件有个形参props表示期望接收到的参数。
      function ComponentA(props){
          return ()
      }

      状态声明：借助Hook useState
        let [total,setTotal]=useState(0)
      生命周期：借助Hook useEffect
      useEffect(()=>{
        //componentDidMount、componentDidUpdate
        setTotal(total+1)
        //组件销毁阶段 componentWillUnMount
        return ()=>{}
      },['total'])

    2)类组件
      在类组件中，我们的定义类需要继承React.Component;
      render 函数务必要重新进行定义；
      构造函数可以不提供，如果提供，那么第一行代码一定是调用
      父构造函数，通过super，
      构造函数的作用：初始化state，初始化函数
      类中我们直接定义方法，这些方法可以在jsx中使用，只不过要通过
      this来进程访问
      类中我们可以直接编写生命周期钩子方法，例如“componentDidMount,
      这些方法会在生命周期的对应阶段进行执行。
      class ComponentA{
        constructor(props){
          super(props)
          //状态初始化、函数的this绑定
        }
        //生命周期
        componentDidMount(){
        
        }
        render(){
          return <div></div>
        }
      }
  
      let c={
          data(){
              return {
              
              }
          }
      }
6.类组件生命周期
  1)初始化绑定阶段
    constructor：组件实例初始化 state,methods
    static getDerivedStateFromProps()
      //将props中的值映射到state中，应用场景？
    render:渲染
    componentDidMountreact-dom/babel
      //初次渲染完毕
  2)更新阶段(当state/props发生改变的时候)
    static getDerivedStateFromProps()
      //将props中的值映射到state中，应用场景？
    render：渲染
    componentDidUpdate：更新完毕
  3)销毁阶段
    componentWillUnMount：准备销毁，回收
7.函数组件生命周期
  分类管理：
    categories
    params:{}
  function ComponentA(){
    const [params,setParams]=
    useState({page:1,pageSize:10})
    const [categories,setCategories]=useState([])

    function loadCategories(){

    }

    useEffect(()=>{
      //componentDidMount(初始化ajax)、componentDidUpdate()
      //加载categories
      loadCategories();

      //componentWillUnMount
      return ()=>{

      }
      
    },['categories']);
  }
8.表单
  react 表单不存在双向数据绑定，如果想要获取表单数据，需要通过onChange
  进行表单元素的监听，通过事件对象获取表单元素上的值
其他：
  Effect:副作用，函数执行完毕后会对函数外部变量造成影响
    class Foo{
      users:[];

      loadData(){
        axios.get()
        this.users=response.data;
      }
    }
  plain Function:纯函数，函数执行完毕后不会对外部变量造成影响，
  并且传入什么样的参数就返回对应的结果

    function foo(a,b){
      return a+b;
    }
9.ref引用
  reactjs.org官方文档
  DOM引用，渲染（可视化，canvas...）
  this.container=React.createRef()  //{current:null}

  this.container.current
  <div ref={this.container}></div>
10.高阶组件HOC <=>类似于vue中的混入mixin
  高阶组件，接收一个组件作为参数，返回一个新的组件
  reduce(高阶函数)
  作用：抽离公共特性，例如路由、状态机....
  实现方法：
    1)props代理；
      function withInfo(WrappedComponent){
        return class extends React.component{
          render(){