精华内容
下载资源
问答
  • 主要介绍了Vue函数式组件及vue函数式组件的优缺点,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 一、函数式组件和普通组件的区别 渲染快 没有实例,意味着没有(this) 没有生命周期(没有响应式数据) 二、组件函数的使用  1.以局部组件为例,将组件标记为functional=ture; 因为函数式没有实例,因此组件...
  • 什么是函数式组件 没有管理任何状态,也没有监听任何传递给它的状态,也没有生命周期方法,它只是一个接受一些 prop 的函数。简单来说是 一个无状态和无实例的组件 基本写法: Vue.component('my-component', { ...
  • 函数式组件

    2020-07-13 21:40:14
    函数式组件 函数式组件中,没有 state 和 生命周期,所以又被称为 无状态组件,在早期 react 版本中,被当前纯渲染组件来用 Hook 使用规则 只在 React 函数中调用 Hook 只在函数组件调⽤Hooks,React Hooks目前只...

    函数式组件

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

    Hook 使用规则

    只在 React 函数中调用 Hook

    • 只在函数组件调⽤Hooks,React Hooks目前只支持函数组件,所以⼤大家别在class组件或者普通的函数⾥面调⽤Hook钩⼦函数
    • React Hooks的应用场景在函数组件,自定义hooks
    • 只在顶层调⽤Hooks Hooks的调⽤,尽量只在顶层作⽤域进行调用不要在循环,条件或者是嵌套函数中调⽤Hook,否则可能会⽆无 ,确保每次组件渲染时都以相同的顺序调⽤Hook
    • 所有的 hook 必须 以 use开头
     // 开头必须是 use
    function useSize(){
        return {
            w:window.innerWidth,
            h:window.innerHeight
        }
    }
    

    react hooks提供的api,大多都有记忆功能,例如

    • useState
    • useEffect
    • useLayoutEffect
    • useReducer
    • useRef
    • useMemo 记忆计算结果
    • useCallback 记忆函数体

    Hooks优势:

    • 函数组件不能使用state,遇到交互更改状态等复杂逻辑时不能更好地支持,hooks让函数组件更靠近class组件,拥抱函数式编程。
    • 解决副作⽤问题,hooks出现可以处理数据获取、订阅、定时执行任务、手动修改 ReactDOM这些⾏为副作用,进行副作用逻辑。比如useEffect。
    • 更好写出有状态的逻辑重用组件。
    • 让复杂逻辑简单化,比如状态管理:useReducer、useContext。
    • 函数式组件比class组件简洁,开发的体验更好,效率更⾼,性能更好。
      更容易发现无用的状态和函数。

    常用 hook

    • useState
      const [state, setState] = useState(initialState);
    • useEffect 类组件
      componentDidMount、componentDidUpdate 和 componentWillUnmount
      需要清除的副作用
         // 挂载,更新,卸载三者合一
       useEffect(()=>{
           console.log("组件更新或者挂载");
           return ()=>{
              console.log("组件卸载")
           }
        },[age]);
    
    // 分开写
       useEffect(()=>{
          return ()=>{
             console.log("组件挂载")
          }
       },[]);
       useEffect(()=>{
          return ()=>{
             console.log("组件更新")
          }
       },[]);
       useEffect(()=>{
          return ()=>{
             console.log("组件卸载")
          }
       },[age]);  //监听数据目标
    
    • useRef
    展开全文
  • 主要介绍了浅谈VUE防抖与节流的最佳解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 函数式组件 顾明思义,函数就是组件,组件就是一个函数。 函数式组件长啥呢?没错,就是如下面这样的 function App(){ return ( <div>hello,nice to meet you</div> ); } 1、看看函数式组件有哪些...

    函数式组件

    顾明思义,函数就是组件,组件就是一个函数。
    函数式组件长啥呢?没错,就是如下面这样的

    function App(){
       return (
           <div>hello,nice to meet you</div>
       );
    }
    

    1、看看函数式组件有哪些特点?

    • 组件的第一个参数是props,它是不可改变的,函数不能更改输入参数(接收父级传来的信息)
    • 组件中return必须写(定义该组件要渲染的内容)
    • 生命周期,无this,无state
    • 单向数据流(数据必须从较高的组件流向较低的组件)
      补充:React 16.7(beta)之前,函数组件一直被当做纯渲染组件来使用

    2、组件如何传递数据的?
    子级组件函数中默认有一个props参数,子级通过 props.自定义属性 获取父级传来的值

    • 父级
     function 父级组件(){
        return(
           <子级组件 自定义属性="自定义属性的值"/>
        )
    
    • 子级
    function 子级组件(props){
       return(
          {props.自定义的属性}
       );
    }
    

    具体示例如下:

    export default function App() {//父级
        return (
            <div>
                <Child info="父级传给子级的信息">
                    {/* 不能这样写,无法使父级直接传给孙子级信息 */}
                    {/* <Grandson info2="父级传给孙子级的信息"></Grandson> */}
                </Child>
            </div>
        );
    }
    function Child(props) {//子级
    console.log(props);//{info: "父级传给子级的信息"}
        return (
            <div>
                1-{props.info}
                {/* <Grandson info2="父级的子级传给子级的信息"></Grandson> */}
                {/* 下面这种方式实现了父级传给孙子级信息的目的 */}
                <Grandson info2={props.info}></Grandson>
            </div>
        );
    }
    function Grandson(props) {//孙子级
        console.log(props);//{info2: "父级的子级传给子级的信息"}
        return (
            <div>
                2-{props.info2}
            </div>
        );
    }
    

    3、React hooks
    React hooks是React 16.8中的新增功能。它们使您无需编写类即可使用状态和其他React功能
    3-1、 hook的优点:

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

    3-2、常用的hook:

    • useState
      添加组件的状态
      let [state, setState] = useState(initialState);
    import React,{useState} from 'react';
    import Child from './Child';
    export default function App() { //父级
       //字符串state
       // let [name,setName] = useState("小度");
       //对象state
       let [data,setData] = useState({
          name:"小度",
          type:"智能机器人"
       });
       return (
          <div>
             {/* 父级传给子级的数据 */}
             {/* <Child info={name}/> */}
             <Child data={data}/>
             <button onClick={
                ()=>{
                   // 修改字符串(修改name值)
                   // setName("度小糊")
                   
                   // 修改对象
                   setData({
                      name:"度小糊",
                      type:data.type
                   })
                }}>
                点击更换
             </button>
          </div>
       );
    }
    
    import React, { useState } from 'react';
    export default function Child(props) { //子级
    console.log(props);
    return (
        <div>
            {/* 子组件通过props接收父组件传过来的数据 */}
            {/* {props.info} */}
            <h2>name:{props.data.name}</h2>
            <h2>type:{props.data.type}</h2>
        </div>
    );
    }
    
    • useEffect
      通过使用这个 Hook,通知 React 组件需要在渲染后执行什么操作。
      React 将记住传递的 function(把这个 function 成为 “effect”),
      并在执行 DOM 更新后调用这个 function。
      可以让你能够在 function 组件中执行副作用
      可以把它看做是三个生命周期的组合体 componentDidMount、componentDidUpdate 和 componentWillUnmount

    父级

     import React,{useEffect} from 'react';
     let [自定义子组件属性, 自定义函数] = useState({
          // 属性可以是任何类型,如下:属性1是string类型,属性2是number类型
          属性1: "属性值1",
          属性2: 属性值2
     })
    

    子级

    // 调用useEffect函数,两个参数,第一个参数是回调函数,第二个参数是需要检测的数据
    useEffect(() => { 
       return () => {
          console.log("挂载了")
       }
    }, [自定义子组件属性.属性2]); // 这里是获取从父级传来的一个属性
    

    具体示例如下:

    import React,{useState} from 'react';
    export default function App() { //父级
       let [data, setData] = useState({
          name: "金毛",
          age: 3
       })
       let [show, setShow] = useState(true);
       return (
          <div>
             {show?<Child data={data} />:""}
             <button onClick={() => {
                setData({
                   // 修改name值,age不变
                   name: "泰迪",
                   age: data.age
                })
             }}>
                点击切换
             </button>
             <button onClick={()=>{
                setShow({show:false})
             }}>
                卸载
             </button>
          </div>
       );
    }
    
    export default function Child(props) { //子级
        let {data} = props;
        let [age, setAge] = useState(8);
    
        useEffect(()=>{
            console.log("组件更新或挂载");
            return ()=>{
                console.log("卸载了");
            }
        // },[data.name]); //name是检测的数据
        // },[data.age]);  //age未检测
        },[age]); //数组为空也会渲染页面 
    
        useEffect(() => {
            return () => {
                console.log("挂载了")
            }
        }, []);
    
        useEffect(() => {
            return () => {
                console.log("卸载了")
            }
        }, []);
    
        useEffect(() => {
            return () => {
                console.log("更新了")
            }
        }, [age]);
    
        return (
            <div>
                {/* 接收父级传过来的数据 */}
                <h2>name:{data.name}</h2>
                {/* <h2>age:{data.age}</h2> */}           
                
                {/* 子级自身的state */}
                <h2>age:{age}</h2>
               
                <button onClick={() => {
                    //每点击按钮一次就长一岁 
                    setAge(++age);
                }}>
                    长一岁
                </button>
            </div>
        );
    }
    
    • useRef
      给dom添加唯一标识

    ref创建

     import React,{useRef} from 'react';
     let 变量名 = useRef(); 
    

    ref获取

     return( 
       <h2 ref={变量名}>{状态}</h2>
     )
    

    具体示例如下:

    // 父级代码同上例
    import React,{useRef} from 'react';
    export default function Child(props) {// 子级
        let {data} = props;
        let [age, setAge] = useState(8);
        let ageMark = useRef();// 创建useRef
        let [txt,setTxt] = useState("前端");
        
        useEffect(() => {
            return () => {
                console.log(ageMark.current);//标识ref的标签
            }
        });
    
        return (
            <div>
                <h2>name:{data.name}</h2>
                <h2 ref={ageMark}>age:{age}</h2>
                <button onClick={() => {
                    setAge(++age);
                }}>
                    长一岁
                </button>
    
                <p>{txt}</p>
                <input type="text" 
                value={txt} 
                onChange={({target})=>{
                    setTxt(target.value)}
                }/>
            </div>
        );
    }
    

    注意:

    • 只在最顶层使用 Hook
    • 只在 React 函数中调用 Hook
    • 自定义 hook 时,可以调用别的hook
    • 在组件内使用 useEffect 是的可以直接从副作用中访问自身state或者任何的 props
    • 所有的 hook 必须 以 use
    • 在第一次 render 之后和每次 update 之后都会运行useEffect
    展开全文
  • 基于redux、react函数式组件,简单、健壮、强代码组织的框架 deef从“响应一个个用户事件”出发,进而抽象成状态数据及数据流转,最后表现成UI渲染,达成交互 代码分层: 状态决定展现,交互就是改状态:model state...
  • React函数式组件及React常用hooks

    千次阅读 2020-08-03 16:46:54
    文章目录React函数式组件及常用hooks函数式组件函数式组件简单介绍React hooks(钩子)React hooks的优势常用hook - useState常用hook - useEffect常用hook - useRef常用hook - useMemoHook 使用规则 React函数式组件...

    React函数式组件及常用hooks

    函数式组件

    函数式组件简单介绍

    • 函数式组件: 函数式组件本质就是一个普通函数, 接收一个props参数, 并返回一个 reactElement .

    • 函数式组件中没有 this和生命周期函数, 不能使用 string ref

    • 使用函数式组件时应该尽量减少在函数组件内部生命子函数, 否则, 每次组件更新时, 都会重新创建这个函数, 会导致性能比较差.

    函数式组件案例代码演示: 一个简单的函数式组件

    import React from 'react'
    /**
     * 函数式组件: 本质就是一个函数
     *  - 函数接收一个参数: 参数是父组件传递过来的属性 props
     *  - 函数组件必须有一个返回值, 返回值是该组件要输出的内容.
     *  - 函数组件中没有this, 所以函数组件是一个无状态组件
     *  (16.8-) 无状态组件: 函数组件
     *      - 函数组件没有状态及生命周期
     *      - 函数组件也没有 this
     */
    
    function Child(props) {
        console.log('子组件接收的props -->>',props);
        return(
            <div>
                <h2>我是子组件 -> {props.name}</h2>
            </div>
        )
    }
    
    function App() {
        return(
            <div>
                <h1>hello, React</h1>
                <Child name={"Gene"} />
            </div>
        )
    }
    export default App
    

    React hooks(钩子)

    React hooks 官网介绍

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

    React hooks的优势

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

    常用hook - useState

    React 中, 通常 use 开头的都是hook, 所以后期我们自定义hook 的时候也是遵循这套规则.

    useState 用来初始状态, 类似于类组件中的 state.

    [state,setState] = useState(initState)
    	- state 当前对应的状态
        - setState 修改 state 的方法
    // useState 返回一个数组
       - 数组的第一项是初始的状态数据.
       - 数组的第二项是修改对应状态数据的方法.
        
    // 注意,[state,setState], 数组中的 state和setState并不需要一定是这两个变量, 因为它是个数组,所以我们解构的时候只是按照数组对应的索引来结构,跟变量名称无关, 所以这里这两个变量是可以写成任意具有实际意义的其他变量名称的, 比如如下代码
        [name,setName] = useState('Gene')
    

    useState 的使用案例代码如下:

    import React,{useState,createRef} from 'react'
    const inputRef = createRef()
    function Child(props) {
        console.log('子组件接收的props--->',props);
        const {name,setName} = props;
        return(
            <div>
               <p>name:{name}</p>
                <form action="#">
                    <input type="text"
                        value={name}
                        ref={inputRef}
                        onChange={({target})=>{
                            setName(target.value)
                        }}
                    />
                </form>
            </div>
        )
    }
    
    function App() {
        let [name,setName] = useState('Gene');
        return(
            <div>
                <Child name={name} setName={setName} />
            </div>
        )
    }
    
    export default App
    

    多状态的时候, 也可以初始传入一个对象,比如如下:

    const [state,setState] = useState({name:'Gene',age:18})
    

    常用hook - useEffect

    useEffect 的基本使用案例演示如下:

    import React,{useState,useEffect} from 'react'
    /**
     *  useEffect: 直译为 副作用
     *      - useEffect(callback,数组) 接收两个参数,
     *      - 第一个参数是一个回调函数, 回调函数内部可以有一个返回值,
     *          该返回值必须是一个函数, 该返回值函数会在组件即将卸载的时候执行.
     *      - 第二个参数是一个可选数组,数组中有三个依赖.[依赖1,依赖2,依赖3].
     *  useEffect 相当于: componentDidMount,componentDidUpdate和
     *      componentWillUnmount的一个综合体
     *
     *  只希望在组件挂载之后执行某些事情(componentDidMount)
     *      如果我们只需要再组件挂载之后执行 useEffect, 我们可以直接给一个空的依赖即可 []
     *      即: useEffect(()={},[])
     */
    function Child(props) {
        const {name,setName,age,setAge} = props;
        useEffect(()=>{
            console.log('组件挂载/更新/卸载了 --> ');
            return ()=>{ // 返回一个函数, 该函数只在当前组件卸载的时候执行.
                console.log('%c 組件卸載了-->>','color:red');
            }
            // 这里的监听了name依赖, 所以name改变, useEffect就会执行,
            // 无论age怎么改变,useEffect都不执行, 这样可以实现具体控制单个值
            // 来决定是否执行 useEffect的逻辑, 更加细粒度的控制, 提高性能.
        },[name]); // 如果此处的依赖数组[]是空数组, 那么只会在组件挂载时执行该 useEffect
        return(
            <div>
               <p>name:{name}</p>
                <form action="#">
                    <input type="text"
                        value={name}
                        onChange={({target})=>{
                            setName(target.value)
                        }}
                    />
                    <br/>
                    <input type="text"
                           value={age}
                           onChange={({target})=>{
                               setAge(target.value)
                           }}
                    />
                </form>
            </div>
        )
    }
    
    function App() {
        let [name,setName] = useState('Gene');
        let [age,setAge] = useState(18);
        let [isShow,setIsShow] = useState('true');
        return(
            <div>
                {isShow ? (<Child
                    name={name}
                    setName={setName}
                    age={age}
                    setAge={setAge}
                />):''}
                <button onClick={()=>{
                    setIsShow(false)
                }}>卸载Children</button>
            </div>
        )
    }
    
    export default App
    

    常用hook - useRef

    useRef 官网详细介绍

    useRef的作用:

    • 获取真实 DOM.
    • 记录组件更新之前的值.

    案例代码示例如下:

    src/app.js

    import React,{useState} from 'react'
    import Child from  './Child'
    
    function App() {
        const [name,setName]=useState("Gene");
        return(
            <div>
                <Child name={name} setName={setName}/>
            </div>
        )
    }
    export default App
    

    **src/Child.js **

    import React,{useState,useEffect,useRef} from 'react'
    /**
     *  useRef(initRef)
     *      1. 获取真实DOM
     *      2. 记录组件更新之前的值
     */
    function Child(props) {
        const {name,setName} = props;
        const [age,setAge] = useState("18");
        const div = useRef(null);
        const preVal = useRef({ // 记录两个参数
            name,age
        });
        useEffect(()=>{
            console.log(div.current);
            console.log(preVal.current);
            preVal.current = { // 每次组件更新后, 记录新的 name, age的值
                name,age
            }
        });
        return(
            <div ref={div}>
                <h1>hello, 我是Child</h1>
                姓名: <input
                        type="text"
                        value={name}
                        onChange={({target})=>{
                            setName(target.value)
                        }}
                      />
                      <span>{name}</span>
                <br/>
                <p>{age}</p>
                年龄: <input
                        type="text"
                        value={age}
                        onChange={({target})=>{
                            setAge(target.value)
                         }}
                      />
                    <span>{name}</span>
            </div>
        )
    }
    
    export default Child
    

    常用hook - useMemo

    useMemo官网介绍

    如果我们想在组件挂载或更新前做某些操作, 我们可以使用 useMemo 这个hook .

    案例示例代码如下:

    src/app.js 同上

    src/Child.js

    import React,{useState,useEffect,useMemo} from 'react'
    function Child(props) {
        const {name,setName} = props;
        const [age,setAge] = useState("18");
        const val = useMemo(()=>{
            console.log('组件即将挂载及即将更新');
            return `姓名:${name}  年龄:${age}`
        },[name,age]);
       useEffect(()=>{
           console.log('组件挂载完成或更新完成');
       });
       console.log('组件挂载或更新');
        return(
            <div>
                <h1>hello, 我是Child</h1>
                <p>{val}</p>
                姓名: <input
                        type="text"
                        value={name}
                        onChange={({target})=>{
                            setName(target.value)
                        }}
                      />
                      <span>{name}</span>
                <br/>
                年龄: <input
                        type="text"
                        value={age}
                        onChange={({target})=>{
                            setAge(target.value)
                         }}
                      />
                    <span>{age}</span>
            </div>
        )
    }
    export default Child
    

    Hook 使用规则

    • 只在 React 函数中调用 Hook
      • React 函数组件中
      • React Hook 中
    • 只在最顶层使用 Hook, 否则会报错.
    展开全文
  • react中函数式组件React Hooks

    千次阅读 2020-03-31 00:30:13
    在16.8版本之前函数式组件无法写状态所以一般只能用class组件成本比较高代码嵌套比较深,并且钩子函数(生命周期相对来说过于复杂)在16.8之后出了函数式组件的状态后,很好的解决了这些弊端。 useSt...

    React Hooks

    函数式组件

    使用hooks理由

    1. 高阶组件为了复用,导致代码层级复杂
    2. 生命周期的复杂
    3. 写成functional组件,无状态组件,因为需要状态,又改成了class,成本高

    在16.8版本之前函数式组件无法写状态所以一般只能用class组件成本比较高代码嵌套比较深,并且钩子函数(生命周期相对来说过于复杂)在16.8之后出了函数式组件的状态后,很好的解决了这些弊端。

    useState

    在之前版本中函数式组件是不支持状态的为了让函数式组件更好的支持状态,可以利用useState

    const [name,setName] = useState("Riven")
    

    主要利用这个useState的方法 也是一个数组它有个值一个是Riven,另一个是修改这个状态的方法f()你可以打印一下自己查看console.log(useState(“Riven”)) 如上代码就是将这个状态和这个修改状态的方法给解构出来这样就可以访问到状态,并且进行修改了

    // rcc => react component class
    // rfc => react component function
    
    import React,{useState} from 'react'
    //利用useState让函数式组件支持状态
    
    function App(){
        console.log(useState("Riven"));
    //不支持状态
        const [name,setName] = useState("Riven")
        const [age,setAge] = useState(25)
        return(
            <div>
                app----{name}---{age}
                <button onClick={()=>{
                    setName("kerwin")
                    setAge(100)
                }}>click</button>
            </div>
        )
    }
    
    export default App
    
    

    以上就是函数式组件的基本写法了你肯定有许多问题?函数式组件的生命周期呢?函数式组件的传值呢通信呢?没有类组件的写法这些应该怎么写呢?

    请随我继续往后看

    todolist小案例(函数式组件)

    首先怎么获取input框中的value值呢?

    这里我们有两种方法和类组件差不多

    1. 就是利用onChage事件
    import React,{useState} from 'react'
    
    function App(){
        const [text, setText] = useState("")
        return(
            <div>
                <input type="text" onChange={(ev)=>{
                    // console.log(ev.target)
                    setText(ev.target.value)
                }} />
    
            </div>
        )
    }
    
    export default App
    
    
    1. 利用ref

    这种方法较为复杂需要利用useRef

    import React,{useState,useRef} from 'react'
    
    const mytext = useRef(null)
    
           <input type="text" onChange={(ev)=>{
                    // console.log(ev.target)
                    setText(ev.target.value)
                }} ref={mytext} />
    
    

    访问的时候可以直接通过mytext.current.value得到value值

    import React,{useState,useRef} from 'react'
    
    function App(){
        const [text, setText] = useState("")
        const mytext = useRef(null)
        return(
            <div>
                <input type="text" onChange={(ev)=>{
                    // console.log(ev.target)
                    setText(ev.target.value)
                }} ref={mytext} />
                <button onClick={()=>{
                    console.log(mytext.current.value)
                }}>add</button>
    
            </div>
        )
    }
    
    export default App
    
    
    完整的todolist

    需要注意学习的地方

    • input框value值获取

    • 怎么让进行添加

    • 怎么让添加完成后输入框的value值清空

    • 怎么进行删除

    import React,{useState,useRef} from 'react'
    
    function App(){
        const [text, setText] = useState("")
        const [list,setList] = useState(["111","222","333"])
        const mytext = useRef(null)
    
    
        //删除函数只是想写在外面
      const  handledelclick = (index)=>{
            var newlist = [...list]
            newlist.splice(index,1)
            setList(newlist)
        }
    
    
        return(
            <div>
                <input type="text" onChange={(ev)=>{
                    // console.log(ev.target)
                    setText(ev.target.value)
                }} ref={mytext}  value={text} />
                <button onClick={()=>{
                    // console.log(mytext.current.value)  //ref
                    setList([...list,text])   //添加数组
                    setText(" ")
    
                }}>add</button>
                {
                    list.map((item,index)=>
                        <li key={item}>
                            {item}
                            <button onClick={()=>handledelclick(index)}>del</button>
                        </li>
                    )
                }
            </div>
        )
    }
    
    export default App
    
    

    useEffect

    在函数式组件中我们没有生命周期useEffect类似生命周期但不是生命周期

    我们把数据请求放在函数组件的哪里呢?

    首先需要知道useEffect接收两个参数,第一个是处理函数,第二是依赖

    第一个参数相当于一旦创建就会执行。

    如果第二个参数传入的依赖状态改变也会自动执行

    如果第二个参数传入的依赖状态为空就相当于值会走一次

    如果不传任何状态改变都会触发第一个处理函数的执行

    return 出来的这个函数只有销毁的时候才会执行

        useEffect(()=>{
            console.log("创建");
            var id = setInterval(()=>{
                console.log(111);
            },2000)
            return ()=>{
                console.log("销毁")
                clearInterval(id)
            }
        },[])
    
    
    

    下来看一个简单的案例

    import React,{useState,useEffect} from 'react'
    
    const Child = ()=>{
        useEffect(()=>{
            console.log("创建");
            var id = setInterval(()=>{
                console.log(111);
            },2000)
            return ()=>{
                console.log("销毁")
                clearInterval(id)
            }
        },[])
        return(
            <div>
                Child
            </div>
        )
    }
    
    const App = ()=>{
        //useEffect(处理函数,[依赖])
        const [text, setText] = useState("1111")
        const [age, setAge] = useState(25)
        // useEffect(()=>{
        //     console.log("创建或者更新的时候执行")
        // },[text])
    
        //传入空数组相当于cdm
        //[text] 只有text的改变才会执行一次
        //第二参数不传表示任何状态改变都会重新执行
    
        return(
            <div>
                App ----{text} 
                <button onClick={()=>{
                    setText("22222")
                }}>click-text</button>
                <br/>
                {age}
                <button onClick={()=>{
                    setAge(100)
                }}>click-age</button>
                {
                    age===25?
                    <Child/>:
                    null
                }
            </div>
        )
    }
    
    export default App
    
    
    

    在实际应用中函数式组件会自动传一个参数props 这样我们就可以访问到props里面的属性了

    props.match.params.myid
    props.history.goBack()

    import React,{useState,useEffect} from 'react'
    import { PageHeader} from 'antd';
    import axios from 'axios'
    
    const Preview = (props)=>{
        const [title, settitle] = useState("")
        const [content, setcontent] = useState("")
        const [category, setcategory] = useState([])
    
        useEffect(()=>{
            axios.get(`http://localhost:8000/articles/${props.match.params.myid}`).then(res=>{
                console.log(res.data)
                let {title,content,category} = res.data
                settitle(title)
                setcontent(content)
                setcategory(category)
            })
    
        },[props])
    
    
    
    
        return (
            <div>
                <PageHeader
                className="site-page-header"
                onBack={() => {
                    // console.log("back",this.props.history)
                    props.history.goBack()//返回上一个页面
                }} //返回按钮
                title={title}
                subTitle={category.join("/")}
            />
                <div style={{ padding: "24px" }} dangerouslySetInnerHTML={{
                    __html:content
                }}></div>
            </div>
        )
    }
    
    
    export default Preview
    
    

    useCallback

    防止因为组件重新渲染,导致方法被重新创建 ,起到缓存作用; 只有第二个参数 变化了,才重新声明一次

    也就是只需要当需要某个状态改变的时候才让函数执行一次

    import React,{useState,useCallback} from 'react'
    
    export default function App() {
        const [text,settext] = useState("1111")
        const test = useCallback(
            () => {
                console.log(text)
            },
            [text],
        )
        test()
        return (
            <div>
                App-{text}
                <button onClick={()=>{
                    settext("22222")
                }}>click</button>
            </div>
        )
    }
    
    

    useContext useReducer

    首先这两个都是用来在函数式组件中进行非父子通信的

    首先需要创建一个GlobalContext 用来包裹这些生产者的

    import React from 'react'
    const GlobalContext = React.createContext()
    
    export default GlobalContext
    
    

    然后引入

    import GlobalContext from './store'
    
    

    总体代码如下

    import React,{useReducer,useContext} from 'react'
    import GlobalContext from './store'
    import reducer from './store/reducer'
    import axios from 'axios'
    
    const Child1 = ()=>{
        // useContext(GlobalContext)
        // console.log(useContext(GlobalContext))
        let {state,dispatch} = useContext(GlobalContext)
       
        return (
            <div>
                child1-----{state.text}
                <button onClick={()=>{
                    dispatch({
                        type:"Change_text",
                        payload:"child11111111111"
                    })
                }}>click</button>
            </div>
        )
    }
    
    const Child2 = ()=>{
        let {state,dispatch} = useContext(GlobalContext)
        return (
            <div>
                Child2----{state.text}
                <button onClick={()=>{
                    axios.get("http://localhost:8000/rights").then(res=>{
                        // console.log(res.data)
                        dispatch({
                            type:"Change_list",
                            payload:res.data
                        })
                    })
                }}>异步数据</button>
                {
                    state.list.map(item=>
                        <li key={item.id}>{item.title}</li> 
                    )
                }
            </div>
        )
    }
    
    
    const App = ()=>{
        const [state,dispatch] = useReducer(reducer,{
            isShow:true,
            list:[],
            text:"我是公共的状态"
        })  //[公共的状态,改变公共状态的方法]
    
        return (
            <GlobalContext.Provider value={{
                    state,
                    dispatch
                }}>
                <Child1/>
                <Child2/>
            </GlobalContext.Provider>
        )
    }
    
    export default App
    

    这里需要注意

       const [state,dispatch] = useReducer(reducer,{
            isShow:true,
            list:[],
            text:"我是公共的状态"
        })  //[公共的状态,改变公共状态的方法]
    
    

    这块useReducer(reducer) 其实相当于一个数组里面有两个值一个是公共的状态另外一个改变公共状态的方法

    访问的时候可以通过usecontext(GlobalContext) 里面有两个值一个为state,一个为dispatch

    const Child1 = ()=>{
        // useContext(GlobalContext)
        // console.log(useContext(GlobalContext))
        let {state,dispatch} = useContext(GlobalContext)
       
        return (
            <div>
                child1-----{state.text}
                <button onClick={()=>{
                    dispatch({
                        type:"Change_text",
                        payload:"child11111111111"
                    })
                }}>click</button>
            </div>
        )
    }
    

    异步也差不多

    const Child2 = ()=>{
        let {state,dispatch} = useContext(GlobalContext)
        return (
            <div>
                Child2----{state.text}
                <button onClick={()=>{
                    axios.get("http://localhost:8000/rights").then(res=>{
                        // console.log(res.data)
                        dispatch({
                            type:"Change_list",
                            payload:res.data
                        })
                    })
                }}>异步数据</button>
                {
                    state.list.map(item=>
                        <li key={item.id}>{item.title}</li> 
                    )
                }
            </div>
        )
    }
    
    

    reducer文件

    const reducer = (prevstate,action)=>{
        let {type,payload} = action
        switch(type){
            case "Change_text":
                //深复制老状态,返回新状态
                // prevstate.text
                // var newstate = {...prevstate}
    
                return {
                    ...prevstate,
                    text:payload
                } // immutable
    
            case "Change_list":
                return {
                    ...prevstate,
                    list:payload
                }
                default:
                return prevstate
        }
       
        
    }
    
    export default reducer
    

    函数式组件的父子通信问题

    这个和类组件差不多,只不过是函数式组件会自动传一个参数props这样就可以直接访问到props里面的属性了

    父传子(属性)

    子传父(回调函数)

    // 父子通信 ,靠属性
    // 父->子 , 属性
    // 子->父 , callback( 属性传过去一个回调函数)
    
    import React,{useState} from 'react'
    
    const Navbar = (props)=>{
        console.log(props)
        return <div>
            navbar-{props.myname}
            <button onClick={()=>{
                props.onEvent()
            }}>click</button>
        </div>
    }
    
    const Sidebar = ()=>{
        return <div>
            Sidebar
            <ul>
                <li>111111</li>
                <li>222222</li>
                <li>333333</li>
            </ul>
        </div>
    }
    
    const Child = (props)=>{
        return <div>
            child --{props.children}
        </div>
    }
    
    export default function App() {
        const [show, setshow] = useState(false)
        return (
            <div>
                <Navbar myname="测试的抽屉" onEvent={()=>{
                    console.log("父组件中调用")
                    setshow(!show)
                }}/>
                {
                    show?
                    <Sidebar/>
                    :null
                }
    
                <Child>
                    <div>child-11111111</div>
                    <div>child-22222222</div>
                </Child>
            </div>
        )
    }
    
    
    展开全文
  • vue 函数式组件

    2021-02-14 15:01:16
    函数式组件定义 组件没有管理任何状态 也没有监听任何传递给它的状态 也没有生命周期方法时 可以将组件标记为functional 这意味它无状态(没有响应式数据) 也没有实例(没有this上下文) Vue.component('heading', {...
  • React 函数式组件性能优化指南

    千次阅读 2020-04-08 18:39:28
    前言目的本文只介绍函数式组件特有的性能优化方式,类组件和函数式组件都有的不介绍,比如 key 的使用。另外本文不详细的介绍 API 的使用,后面也许会写,其实想用好 hooks 还是蛮...
  • 今天我们主要说下react函数式组件如何进行父组件向子组件传值。在开发过程中,为了提高可读性或者复用性,我们会进行组件的拆分。先说下,我们在引入子组件时,子组件的名字一定要大写,否则会报错(这是个babel编译...
  • React.js(函数式组件

    千次阅读 2020-09-09 09:44:39
      一般,在一个文件中,我们应该只写一个类组件,其他子组件最好是函数式组件,但是用 javascript 实现的函数式组件不能访问 this.ref 和 this.state ,而且也没有生命周期钩子函数,所以在 typescript 中官方还...
  • Vue函数式组件

    2019-08-23 17:12:53
    函数式组件概述向子元素或子组件传递特性和事件slots() 和 children 对比 概述   之前创建的锚点标题组件是比较简单,没有管理任何状态,也没有监听任何传递给它的状态,也没有生命周期方法。实际上,它只是一个...
  • 我们之前学习的一直是组件实例上的props,是可以通过this访问组件实例的,比如props,可以通过this.props访问,但是在函数式组件中,不存在组件实例。 function Person() { return ( <ul> <li>姓名:...
  • 函数式组件用法

    2020-01-18 22:01:53
    Vue 官网对函数式组件有以下描述: 我们可以将组件标记为functional,这意味它无状态 (没有响应式数据),也没有实例 (没有this上下文)。 一个函数式组件就像这样: Vue.component('my-component', { functional...
  • 在用react进行函数式编程时,父组件可以通过props向子组件传值,那么子组件怎么向父组件传值呢?首先,父组件需要向子组件传递一个函数,然后,子组件通过props获取函数并附上参数,最后,父组件通过函数拿到子组件...
  • 函数式组件与类组件有何不同 文章在一开始就声明了:这两种写法没有好坏之分,性能差距也几乎可以忽略,而且 React 会长期支持这两种写法。 至于代码的性能问题,这主要取决于代码的作用,而不是选择函数式组件和类...
  • React 定义函数式组件

    2021-01-10 16:22:32
    react定义函数式组件的代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>1_函数式组件</title> </head> <body> <!-- 准备...
  • React函数式组件

    千次阅读 2020-02-23 22:12:02
    React组件:可以分为类组件和函数式组件 1、函数式组件中没有state 2、函数式组件中没有生命周期(重点,涉及到生命周期的方法只能在类组建中定义) 可以借助react提供的hooks在函数式组建中做状态和方法 react对象...
  • 与React类组件相比,React函数式组件究竟有何不同? 一般的回答都是: 类组件比函数式组件多了更多的特性,比如 state,那如果有 Hooks 之后呢? 函数组件性能比类组件好,但是在现代浏览器中,闭包和类的原始性能...
  • vnode对象包括(vnode并不是vue实例,而是vue实例中渲染函数render执行后生成的结果) this.tag = tag // 当前节点标签名 this.data = data // 当前节点数据(VNodeData类型) this.children = children // 当前节...
  • Vue 提供了一种称为函数式组件的组件类型,用来定义那些没有响应数据,也不需要有任何生命周期的场景,它只接受一些props 来显示组件。 一:使用方法 Vue.component('my-component', { functional: true, // ...
  • Vue 简单的函数式组件

    千次阅读 2019-03-21 00:41:21
    Vue 函数式组件 吐槽… 以下是官方的例子,嗯…啥都看不懂…没有实现任何效果… var EmptyList = { /* ... */ } var TableList = { /* ... */ } var OrderedList = { /* ... */ } var UnorderedList = { /* ... */ } ...
  • 文章目录Vue中如何使用函数式组件**使用场景****什么是函数式组件****如何创建一个函数式组件****为什么使用函数式组件****简单的例子****业务场景下的函数式组件** 使用场景 Vue 推荐在绝大多数情况下使用 template...
  • vue中的函数式组件

    千次阅读 2020-05-12 22:09:48
    用过react的同学都知道,函数式组件在react中的应用是很流行的,那如何在vue中使用函数式组件呢? 什么是函数式组件 熟悉react的同学应该都知道,react中的函数式组件其实就是一个接收一些prop的函数,然后返回HTML...
  • parent.js import React,{ useRef } from 'react' import Child from './child' function Parent(){ const childRef = useRef() const props = { list : ['1', '2', '3'], ... // 父组件调用子组件的方法 childR

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 189,569
精华内容 75,827
关键字:

函数式组件