react讲解(函数式组件,react hook)

Posted stay_少年与梦

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react讲解(函数式组件,react hook)相关的知识,希望对你有一定的参考价值。


前言

今天我们一起来学习react中的函数式组件,以及took的一些用法。


一.函数式组件

理解:

函数式组件中,没有 state 和 生命周期,所以又被称为 无状态组件,在早期 react 版本中,被当前纯渲染组件来用

作用

主要是用来渲染内容,函数名字就是组件名。

代码示例:

import  React, useState from 'react';
 
import Child from './Child'
/* 
 let [状态的值,修改状态的方法] =useState(状态的初始值);

*/

function App() 
  // console.log(this);
  // state = 
  //   data:["dd"]
  // 

  // let data =this.state;

  let [data,setData] =useState(
    name:'浩克',
    age:18
  
    );


    let [show,setShow] = useState(true)
  return <div>
          show ?<Child data=data/>:""
          <button onClick=()=>
            setData(name:"疯狂浩克",age:data.age
          );

          >变身</button>

          <button onClick=()=>
            setShow(false)
          >卸载</button>
         </div>
  


export default App;

函数组件注意事项

1.组件的第0个参数是props----接收父级传过来的信息

2.组件中的 return(必须写)----定义该组件要渲染的内容

3.没有生命周期,没有this,没有state

4.在16.7之前, 函数组件一直当做纯渲染组件来使用

二、React hook

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

参考:https://reactjs.org/docs/hooks-intro.html

React Hooks 优势

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

Hook 使用规则

  • 只在最顶层使用 Hook
  • 只在 React 函数中调用 Hook
    • React 函数组件中
    • React Hook 中 - 我自己定义 hook 时,可以调用别的hook
  • 所有的 hook 必须 以 use

2.常用的hook

useState

函数组件里定义状态值

​ 先引用useState,接着定义

​ let [状态值,修改状态的方法名]=userState(状态的初始值)

​ 修改状态值方法名是自己定义的

代码示例:

App.js

import  React, useState from 'react';
 
import Child from './Child'
/* 
 let [状态的值,修改状态的方法] =useState(状态的初始值);

*/

function App() 
  // console.log(this);
  // state = 
  //   data:["dd"]
  // 

  // let data =this.state;

  let [data,setData] =useState(
    name:'浩克',
    age:18
  
 );
    let [show,setShow] = useState(true)
  return <div>
          show ?<Child data=data/>:""
          <button onClick=()=>
            setData(name:"疯狂浩克",age:data.age
          );

          >变身</button>

          <button onClick=()=>
            setShow(false)
          >卸载</button>
         </div>
  


export default App;

Child.js

import  React,useState,useEffect from 'react';
function Child(props)
   let data = props;
   let [age,setAge] = useState(8)


   useEffect(() => 
     console.log("挂载了");

   useEffect(() =>
     return ()=>
       console.log("卸载了");
     
   ,[])
   useEffect(() =>
     console.log("更新了");
   ,[age])
    return <div>
            <h1>name:data.name</h1>
            <h1>age:age</h1>
            <button onClick=()=>
              setAge(++age)
            >长一岁</button>
          </div>
  
  

  export default Child

useEffect

介绍:

  • 是一个类组件

  • 在 componentDidMount、componentDidUpdate 和 componentWillUnmoun中使用(挂载,更新,卸载)

  • 有两个参数第一个蚕食是回调函数,第二个参数是个数组,里面放检测的参数;

  • useEffect 的第二个参数,有三种情况

  1. 什么都不传,组件每次 render 之后 useEffect 都会调用,相当于 componentDidMount 和 componentDidUpdate
  2. 传入一个空数组 [], 只会调用一次,相当于 componentDidMount 和 componentWillUnmount
  3. 传入一个数组,其中包括变量,只有这些变量变动时,useEffect 才会执行
代码示例:
import  React, useState from 'react';
import Child from './Child'

function App() 
 
  let [data,setData] =useState(
    name:'浩克',
    age:18
    
    );
    let [show,setShow] = useState(true)
  return <div>
          show ?<Child data=data/>:""
          <button onClick=()=>
            setData(name:"疯狂浩克",age:data.age
          );

          >变身</button>

          <button onClick=()=>
            setShow(false)
          >卸载</button>
         </div>
  


export default App;

Child.js

import  React,useState,useEffect from 'react';
function Child(props)
   let data = props;
   let [age,setAge] = useState(8)


   useEffect(() => 
     console.log("挂载了");
   ,[]);


   useEffect(() =>
     return ()=>
       console.log("卸载了");
     
   ,[])
   useEffect(() =>
     console.log("更新了");
   ,[age])
    return <div>
            <h1>name:data.name</h1>
            <h1>age:age</h1>
            <button onClick=()=>
              setAge(++age)
            >长一岁</button>
          </div>
  
  

  export default Child

挂载和更新在useEffect里面写,而卸载在return里面写

检测参数值发生变化才触发此方法 ,如果不写参数,怎样都不会触发这些方法

Ref和useefect

代码案例:

App.js代码如下:

import  React, useState from 'react';
 
import Child from './Child'
function App() 
  let [data,setData] =useState(
    name:'浩克',
    age:18
  
    );


    let [show,setShow] = useState(true)
  return <div>
          show ?<Child data=data/>:""
          <button onClick=()=>
            setData(name:"疯狂浩克",age:data.age
          );

          >变身</button>

          <button onClick=()=>
            setShow(false)
          >卸载</button>
         </div>
  


export default App;

Child.js

import  React,useState,useEffect,useRef from 'react';

function Child(props)
   let data = props;
   let [age,setAge] = useState(8)

  // 只要不做修改ref,就会存储初始的值(变化前的值)
  let ageP =useRef(age);

  let [txt,setTxt] =useState("文字")

  let txtP =useRef(txt);
   useEffect(() => 
    //  console.log(ageP.current,age);
     console.log(txtP.current,txt);
     txtP.current =txt;

   ,[txt]);

  let message = `hahahha`
    return <div>
            <h1>name:data.name</h1>
            <h1 ref=ageP>age:age</h1>
            <button onClick=()=>
              setAge(++age)
            >长一岁</button>
            <p>txt</p>
            <input type="text" value=txt
              onChange=(target)=>
                setTxt(target.value )
              
              
            />

            <p dangerouslySetInnerHTML=
              __html:message
            > </p>
          </div>
  
  

  export default Child

总结

今天我们一起学习了react的函数式组件以及react took 的一些功能及它的使用方法。

觉得作者写的不错,可以点个赞

以上是关于react讲解(函数式组件,react hook)的主要内容,如果未能解决你的问题,请参考以下文章

react讲解(函数式组件,react hook)

react讲解(函数式组件,react hook)

为何要使用React Hooks?

React 属性, 函数式组件以及Hook

React 属性, 函数式组件以及Hook

React 属性, 函数式组件以及Hook