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>
  );
}
相关推荐
四喜花露水25 分钟前
Vue 自定义icon组件封装SVG图标
前端·javascript·vue.js
前端Hardy34 分钟前
HTML&CSS: 实现可爱的冰墩墩
前端·javascript·css·html·css3
web Rookie1 小时前
JS类型检测大全:从零基础到高级应用
开发语言·前端·javascript
Au_ust1 小时前
css:基础
前端·css
帅帅哥的兜兜1 小时前
css基础:底部固定,导航栏浮动在顶部
前端·css·css3
工业甲酰苯胺1 小时前
C# 单例模式的多种实现
javascript·单例模式·c#
yi碗汤园1 小时前
【一文了解】C#基础-集合
开发语言·前端·unity·c#
就是个名称1 小时前
购物车-多元素组合动画css
前端·css
编程一生2 小时前
回调数据丢了?
运维·服务器·前端
丶21362 小时前
【鉴权】深入了解 Cookie:Web 开发中的客户端存储小数据
前端·安全·web