react(十一)常用的hooks—useState、useEffect、useRef

hooks

React hooks(钩子)

  • hooks 是React 16.8中的新增功能。它们使得无需编写类即可使用状态和其他React功能.

React Hooks 优势

  • 简化组件逻辑;
  • 复用状态逻辑;
  • 无需使用类组件编写。

Hook 使用规则

  • 只能在 React 函数中调用 hooks;
  • 只能在外层使用 hooks。

useState

let [状态,修改该状态的方法] = useState(初始值);

const [state, setState] = useState(initialState);
  • 在同一个组件中可以使用 useState 定义多个状态
  • 注意 useState 返回的 setState 方法,不会进行对象合并
  • 注意 useState 返回的 setState 方法同样是异步方法
function Child() {
  //let [count,setCount] = useState(1);
  let [state, setState] = useState({
    count: 1
  });
  let { count } = state;
  return <div>
    <p>{count}</p>
    <button onClick={() => {
      setState({
        count: count + 1
      })
    }}>递增</button>
  </div>;
}

特别注意:使用useState 返回的 setState 方法,不会进行对象合并

function Child() {
  let [state,setState] = useState({
    name:"xiaochen",
    count: 1
  }); 
  let {name,count} = state;
  console.log("render");
  return <div>
      <input 
        type="text" 
        value={name}
        onChange={({target})=>{
          setState({
            ...state,  //由于不会进行对象合并
            name:target.value
          })
        }}
      />
      <p>{name}</p>
      <p>{count}</p>
      <button onClick={()=>{
          setState({
            ...state,  //由于不会进行对象合并
            count:count+1
          })
          console.log("修改")
      }}>递增</button>
  </div>;
}

useEffect

useEffect(()=>{
  //副作用函数
  return ()=>{
    // 副作用函数的返还函数
  }
},[依赖参数])
  • 依赖参数:
    • 当不写依赖参数时,只要组件更新就会执行副作用函数;
    • 当依赖参数为[ ]时,副作用函数只在挂载完之后执行;
    • 写依赖参数,当监听参数修改时,或组件挂载时执行副作用函数。
useEffect(()=>{
   console.log('组件挂载时、count修改时就会执行执行');
 },[count]);
useEffect(()=>{
    console.log("挂载完成之后执行")
},[]);
useEffect(()=>{
    console.log("组件更新就会执行")
});
  • 类组件
    • componentDidMount、componentDidUpdate 和 componentWillUnmount
  • 需要清除的副作用
    • 副作用:DOM 操作、异步
  • 执行顺序:
    • 挂载阶段:
      • render --> 副作用函数
    • 更新阶段:
      • render --> 返回函数(即将更新) --> 完成更新(副作用函数)
    • 卸载阶段:
      • 返回函数(即将卸载)

useRef

  • 用户关联原生DOM节点,或者用来记录组件更新前的一些数据
  • useRef 存储的是数据,而非获取DOM或组件实例;
  • 源数据改变,ref中存储的数据并不会随之改变,需要手动改变;
  • 通过ref的该特性就可以夸组件的更新阶段传递信息。换句话说,我们可以通过ref来获取组件更新前的信息。
function Child() {
  const [count,setCount] = useState(1);
  const [val,setVal] = useState("");
  const div = useRef();
  const update = useRef(count);
  useEffect(()=>{
    console.log(div.current);
    console.log(update.current,count);
    // 需要手动改变
    update.current = count;
  })
  return <div ref={div}>
      <input type="text" onChange={({target})=>{
        setVal(target.value)
      }}></input>
      <p>{val}</p>
      <p>{count}</p>
      <button onClick={()=>{
        setCount(count + 1);
      }}>递增</button>
  </div>;
}
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值