Day07 React——第七天 (18新特性 hook)

React 18引入了hooks，这是一种让函数组件拥有类组件的功能的方式。使用hooks，函数组件可以拥有状态管理、生命周期方法、副作用处理等功能，使得函数组件具有了和类组件类似的能力。hooks可以让函数组件更加灵活和易于管理，同时也减少了代码的复杂性。常见的hooks包括useState、useEffect、useContext等，它们可以让函数组件更加强大和易于编写。

useState

useState 是一个 React Hook，它允许你向组件添加一个状态变量。

格式：const [state, setState] = useState(initialState)

javascript 复制代码

export default function App() {
  // 调用useState 添加一个状态变量
  // 第一个参数式状态变量
  // 第二个参数 修改状态变量的方法
  const [count, setCount] = useState(0);
  const [span,setSpan] =useState("zhangsan")

  function add() {
    setCount(count + 1);
    setSpan('lisi')
  }
  return (
    <div>
      <Hell />
      {span}: {count}
      <button onClick={add}>+1</button>
    </div>
  );
}

规则：状态不可变

在react中，状态被认为是只读的，我们应该始终替换他而不是修改它，直接修改状态不能引发视图更新

classNames

如何有条件地应用多个 CSS 类？

要有条件地应用 CSS 类，你需要使用 JavaScript 自己生成 className 字符串。

例如，className={'row ' + (isSelected ? 'selected'：'')} 将会生成 className="row" 还是 className="row selected" 取决于 isSelected 是否为 true。

javascript 复制代码

   className = {classNames("nav-item", {
                    active: type === i.type,
                  })}

useRef

useRef 是一个 React Hook，它能帮助引用一个不需要渲染的值

javascript 复制代码

// 1. useRef 生成ref对象 绑定在dom标签上
// 2 dom 可用时，ref.current 获取dom
// 渲染完成之后dom生成之后才可用
export default function App() {
    const inRef = useRef(null)
    const getRef =()=>{
        console.dir(inRef.current.value);
    }
  return (
    <div>
        <input type="text" ref={inRef} />
        <button onClick={getRef}>获取</button>
    </div>
  )
}

父子通信

javascript 复制代码

import React from "react";
import {useState} from 'react'

function Sun(props) {
  let zi = "我是子组件上的数据";
  return (
    <div>
      <p>{props.hello}</p>
      <button
        onClick={() => {
          props.getFu(zi);
        }}
      >
        传递
      </button>
    </div>
  );
}

function Zi(props) {
  return <div>{props.children}</div>;
}

// props 可传递任意的数据
// props 是只读对象
// 不能进行直接修改，父组件的数据只能由父组件修改

export default function App() {
    const [zi,updateZi] = useState('');
  let hello = "hello world!";
  let getFu = (i) => {
    updateZi(i)
  };
  return (
    <div>
      <p>{zi}</p>
      {/* 正常传递方式 父先子传递 变量名 = 值 子传父 自定义方法名 = 函数方法 */}
      <Sun hello={hello} getFu={getFu} />
      {/* children  当我们把内容嵌套再子标签上
      父组件会自动为children的props属性中接收该内容*/}
      <Zi>
        <span>我是谁!</span>
      </Zi>
    </div>
  );
}

兄弟通信

javascript 复制代码

function A({ onGetAName }) {
  // Son组件中的数据
  const name = "this is A name";
  return (
    <div>
      this is A compnent,
      <button onClick={() => onGetAName(name)}>send</button>
    </div>
  );
}

function B({ name }) {
  return (
    <div>
      this is B compnent,
      {name}
    </div>
  );
}

function App() {
  const [name, setName] = useState("");
  const getAName = (name) => {
    console.log(name);
    setName(name);
  };
  return (
    <div>
      this is App
      <A onGetAName={getAName} />
      <B name={name} />
    </div>
  );
}