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>
);
}