react 学习

react 的生命周期钩子

新旧 16 - 17

ref 的三种获取方法

1、字符串形式

<input ref='input1'>

const {input1} = this.refs

console.log(input1.value)

2、回调函数形式

const {input1} = this

<input ref={(c)=>{this.input1 = c}} />

console.log(input1.value)

3、class类绑定形式

saveInput = (c)=>{

console.log(c.value)

} 

<input ref={this.saveInput} />

4、createRef()形式

myRef = React.createRef()

console.log(this.myRef.current.value) 

<input ref={this.myRef}>

jsx 语法规则

1. 定义虚拟DOM时，不要写引号
2. 标签中混入js表达式 要用{}
3. 样式的类名指定不要用class，要使用className
4. 内联样式要使用style={{color:'red',fontSize='12px'}}
5. 只有一个跟标签
6. 标签必须闭合
7. 标签首字母 （1）若标签首字母是小写，标识html同名标签，html中没有则报错 （2）若首字母大写，react 就去渲染对应的组件

useState

vue2通过data，vue3中通过ref，reactive绑定响应式数据，来达到数据与视图同步更新的效果。 而在react中是通过useState来实现的。

基本数据类型的修改

import { useState } from 'react';
function App() {
  // 声明一个叫 “count” 的 state 变量。
  const [count, setCount] = useState(0);
  const handleClick = () => { 
      setCount(count + 1) 
      //setCount((count) => count + 1)  
      //函数式写法，函数式的写法，每次调用`setCount`函数时可以拿到本次更新`count`的最新状态
  }
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>
        Click me
      </button>
    </div>
  );
}

export default App;

** 引用数据类型 的修改**

import { useState } from 'react';

function App() {
  // 声明一个叫 info 的 state 变量。
  const [info, setInfo] = useState({
    name: '张三',
    age: 18
  });
  const handleClick = () => {
    //一个引用类型，使用更新函数时需要改变值的引用，也就是重新去定义新数据
    let newInfo = {...info} 
    newInfo.name = '李四'
    setInfo(newInfo)
  } 
  return (
    <div>
      <p>name: {info.name} age: {info.age}</p>
      <button onClick={handleClick}>
        Click me
      </button>
    </div>
  );
}

export default App;

immutable 编程规范

Immutable 编程规范是一种编程范式，它要求在编写程序时避免对数据进行修改，而是应该创建新的数据副本来进行修改。这样做的好处是可以避免出现意外的数据修改，提高程序的可靠性和可维护性。Immutable 编程规范通常使用不可变数据结构来实现，例如不可变对象、不可变集合等。在许多函数式编程语言中，Immutable 编程规范是被广泛采纳的一种编程风格。

第三方库 useImmer

npm install use-immer --save

直接修改会报错，使用useImmer声明的状态，推荐使用函数式写法可以拿到状态的值并修改，引用类型写法上相比useState更加方便，使用这种方式去修改状态。

import { useImmer } from 'use-immer';
function App() {
  const [user, setUser] = useImmer({
    name : '张三',
    age: 16
  });
  const handleClick = () => {
    setUser(draft => {
      draft.name = '李四'
    })
  }
  return (
    <div>
      <div>name: {user.name} age: {user.age}</div>
      <button onClick={handleClick}>click</button>
    </div>
  )
}

export default App;