溜_x_i_a_o_迪

React Hooks快速入门（前提：React基础）（1）——对比详解State及生命周期、Ref的dom操作、Hooks官网综合实例详细解析并分步骤实现（附详细案例源码解析过程及版本迭代过程）

文章目录

1. React Hooks
- 1.1 React Hooks 优势
- 1.2 React 常用 Hook
- 1.3 Hook 使用规则
- 1.4 自定义 Hook
2. useState
- 2.1 example01
- - 2.1.1 example01-1
  - 2.1.2 example01-2
  - 2.1.3 example01-3
  - 2.1.4 example01-4
  - 2.1.5 example01-5
3. useEffect
- 3.1 example02
- - 3.1.1 example02-1
  - 3.1.2 example02-2
  - 3.1.3 example02-3
  - 3.1.4 example02-4
  - 3.1.5 example02-4
  - 3.1.6 example02-6
  - 3.1.7 example02-7
  - 3.1.8 example02-8
- 3.2 example03
- - 3.2.1 example03-1
  - 3.2.2 example03-2
  - 3.2.3 example03-3
  - 3.2.4 example03-4
  - 3.2.5 example03-5
  - 3.2.6 example03-6
  - 3.2.7 小结
4. useRef
- 4.1 example04
- - 4.1.1 example04-1
  - 4.1.2 example04-2
- 4.2 example05
- - 4.2.1 example05-1
  - 4.2.2 example05-2
5. 综合实例（官网实例）——TodoLists
- 5.1 example06
- - 5.1.1 example06-1
  - 5.1.2 example06-2
  - 5.1.3 example06-3
  - 5.1.4 example06-4
  - 5.1.5 example06-5
  - 5.1.6 example06-6
  - 5.1.7 example06-7
  - 5.1.8 example06-8
  - - 5.1.8.1 example06-8-1
    - 5.1.8.2 example06-8-2
    - 5.1.8.3 example06-8-3
  - 5.1.9 example06-9
  - 5.1.10 example06-10
  - 5.1.11 example06-11
  - 5.1.12 example06-12
  - 5.1.13 example06-13
  - 5.1.14 example06-14
  - 5.1.15 example06-15

1. React Hooks

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

1.1 React Hooks 优势

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

1.2 React 常用 Hook

注意：所有的Hooks都是用use来声明的。

useState
const [state, setState] = useState(initialState);
useEffect
类组件
componentDidMount、componentDidUpdate 和 componentWillUnmount
需要清除的副作用
useRef
useContext
context
createContext、Provider、Consumer、contextType
useMemo
useCallback

1.3 Hook 使用规则

只在最顶层使用 Hook
只在 React 函数中调用 Hook
- React 函数组件中
- React Hook 中

1.4 自定义 Hook

通过自定义 Hook，可以将组件逻辑提取到可重用的函数中。

考虑到在blog中不好体现代码更改的位置，小迪才用github托管代码，大家可以查看github，看到详细版本修改过程，搭配博客学习。

2. useState

const [state, setState] = useState(initialState);

react的state使用

2.1 example01

useState 基本使用。

2.1.1 example01-1

回顾类式组件，添加一个state，并渲染到界面上。

code\project\study-hooks\react-app\src\hooks\state.js

import React,{
     Component} from "react";
 
class State extends Component{
     
    state = {
     
        name:'Leo',
        age:18
    }
 
    render(){
     
        let {
     name,age} = this.state;
        return(
            <div>
                姓名：{
     name},<br/>
                年龄: {
     age}
            </div>
        );
    }
}
 
export default State;

code\project\study-hooks\react-app\src\App.js

import React from 'react';
import State from './hooks/state';
 
function App() {
     
  return (
    <div className="App">
      <State/>
    </div>
  );
}
 
export default App;

参考：https://github.com/6xiaoDi/Projec-React-hooks-enterprise-level-mbapp/tree/as0.01-1
Branch： bhStudy-Hooks

commit description：as0.01-1-example01-1（react的state使用——添加一个state）

tag：as0.01-1

2.1.2 example01-2

更新类式组件state：

绑定事件，写触发函数但需要绑定this，这里用箭头函数避免这个问题。

import React,{
     Component} from "react";
 
class State extends Component{
     
    state = {
     
        name:'Leo',
        age:18
    }
 
    setAge=()=>{
     
        let {
     age} = this.state;
        this.setState(
            {
     
                age: ++age
            }
        )
    }
 
    render(){
     
        let {
     name,age} = this.state;
        return(
            <div>
                姓名：{
     name},<br/>
                年龄: {
     age},<br/>
                <button onClick={
     this.setAge}>长大一岁</button>
            </div>
        );
    }
}
 
export default State;

参考：https://github.com/6xiaoDi/Projec-React-hooks-enterprise-level-mbapp/tree/as0.01-2
Branch： bhStudy-Hooks

commit description：as0.01-2-example01-2（react的state使用——更新state）

tag：as0.01-2

仔细观察其实类组件的state用起来还是比较麻烦的，简单办法就是接下来我们一起学习的hooks。

2.1.3 example01-3

hooks只能用在function组件中。

之前我们也不能在function中使用state，因为是不能使用this相关的东西，但有了hooks之后，这个逻辑就可以畅通了。

我们引入useState，其实Hook就是函数。它接收的参数其实就是state的初始值。

import React,{
     Component,useState} from "react";
 
function State() {
     
    console.log(useState({
     
        name:"leo",
        age: 18
    }));
    return (<div>
        姓名:,<br />
        年龄:,<br />
        <button onClick={
     ()=>{
     
        }}>长大一岁</button>
    </div>);
}
 
export default State;

useState的返回值是1个数组，第1个里存放的是state设置的对象数据，第2个里实际存放的函数就是setstate。

参考：https://github.com/6xiaoDi/Projec-React-hooks-enterprise-level-mbapp/tree/as0.01-3
Branch： bhStudy-Hooks

commit description：as0.01-3-example01-3（react的state使用——Hooks中useState的返回值）

tag：as0.01-3

2.1.4 example01-4

解构useState的返回值，第一个参数是设置的内容，第二个参数是set方法，解构出的命名自定义即可。

注意：初始化的state是对象，setState的时候必须也是对象。

import React,{
     Component,useState} from "react";
 
function State() {
     
    const [state,setAge] = useState({
     
        name:"leo",
        age: 18
    });
    let {
     name,age} = state;
    return (<div>
        姓名:{
     name},<br />
        年龄:{
     age},<br />
        <button onClick={
     ()=>{
     
            setAge({
     
                age: age + 1
            });
        }}>长大一岁</button>
    </div>);
}
 
export default State;

注意：类式组件的setState会进行合并对象，而hooks中的function组件是不会进行合并，只会进行覆盖的。

因此需要合并对象的话，先把原先的state进行展开，再去设置age，即我们自己去实现合并age。

import React,{
     Component,useState} from "react";
 
function State() {
     
    const [state,setAge] = useState({
     
        name:"leo",
        age: 18
    });
    let {
     name,age} = state;
    return (<div>
        姓名:{
     name},<br />
        年龄:{
     age},<br />
        <button onClick={
     ()=>{
     
            setAge({
     
                ...state,
                age: age + 1
            });
        }}>长大一岁</button>
    </div>);
}
 
export default State;

参考：https://github.com/6xiaoDi/Projec-React-hooks-enterprise-level-mbapp/tree/as0.01-4
Branch： bhStudy-Hooks

commit description：as0.01-4-example01-4（react的state使用——Hooks中实现数据添加和更新）

tag：as0.01-4

2.1.5 example01-5

但hooks并不推荐这么使用，因为本来hooks推荐的是单一逻辑或者简化逻辑。

如有一个状态，就应该单独定义1个userState的这个钩子，应该单独去维护，而不是合并在一起维护。这样会导致将来的业务逻辑和组件逻辑越来越复杂。

import React,{
     Component,useState} from "react";
 
function State() {
     
    const [name,setName] = useState("leo");
    const [age,setAge] = useState(18)
    return (<div>
        姓名:{
     name},<br />
        年龄:{
     age},<br />
        <button onClick={
     ()=>{
     
            setAge(age+1);
        }}>长大一岁</button>
    </div>);
}
 
export default State;

参考：https://github.com/6xiaoDi/Projec-React-hooks-enterprise-level-mbapp/tree/as0.01-5
Branch： bhStudy-Hooks

commit description：as0.01-5-example01-5（react的state使用——Hooks中实现数据添加和更新，维护逻辑单一）

tag：as0.01-5

3. useEffect

类组件
componentDidMount、componentDidUpdate 和 componentWillUnmount
需要清除的副作用

3.1 example02

hooks钩子对于生命周期的应用。

3.1.1 example02-1

基本框子：edit为真显示input，点击a标签edit为真后即可显示input

类式组件切换显示编辑框。

code\project\study-hooks\react-app\src\hooks\effect.js

import React,{
     Component,useState} from "react";
 
class Effect extends Component{
     
   state = {
     
        text: "这是今天的进度",
        edit: false  // 是否在编辑状态
   }
   setEditState=(edit)=>{
     
        this.setState({
     
            edit
        });
   }
 
   render(){
     
      let {
     text,edit} = this.state;
      return (<div>
            {
     edit?
                <input
                    type="text"
                />
                :
                <div >{
     text}  <a onClick={
     ()=>{
     
                    this.setState({
     
                        edit: true
                    })
                }}>编辑</a>
                </div>
            }
      </div>);
  }
}
 
export default Effect;

code\project\study-hooks\react-app\src\App.js

import React from 'react';
import Effect from "./hooks/effect";
 
 
function App() {
     
  return (
    <div className="App">
      <Effect/>
    </div>
  );
}
 
export default App;

参考：https://github.com/6xiaoDi/Projec-React-hooks-enterprise-level-mbapp/tree/as0.02-1
Branch： bhStudy-Hooks

commit description：as0.02-1-example02-1（react的生命周期useEffect使用——基本框子）

tag：as0.02-1

3.1.2 example02-2

input框里的内容与状态关联

   render(){
     
      let {
     text,edit} = this.state;
      return (<div>
            {
     edit?
                <input
                    type="text"
                    value={
     text}
                />
                :
                <div >{
     text}  <a onClick={
     ()=>{
     
                    this.setState({
     
                        edit: true
                    })
                }}>编辑</a>
                </div>
            }
      </div>);
   }

提示输入框是非受控组件，React要求要实现为受控组件，因此必须设置onChange事件。

render(){
     
      let {
     text,edit} = this.state;
      return (<div>
            {
     edit?
                <input
                    type="text"
                    value={
     text}
                    onChange={
     
                        (e) => {
     
                            this.setState({
     
                            text:e.target.value
                            })
                        }
                    }
                />
                :
                <div >{
     text}  <a onClick={
     ()=>{
     
                    this.setState({
     
                        edit: true
                    })
                }}>编辑</a>
                </div>
            }
      </div>);
   }

参考：https://github.com/6xiaoDi/Projec-React-hooks-enterprise-level-mbapp/tree/as0.02-2
Branch： bhStudy-Hooks

commit description：as0.02-2-example02-2（react的生命周期useEffect使用——input框里的内容与状态关联）

tag：as0.02-2

3.1.3 example02-3

实现失去焦点切换回文字状态（类式组件实现）

return (<div>
            {
     edit?
                <input
                    type="text"
                    value={
     text}
                    onChange={
     
                        (e) => {
     
                            this.setState({
     
                            text:e.target.value
                            })
                        }
                    }
                    onBlur={
     
                        ()=>{
     
                            this.setState({
     
                                edit:false
                            })
                        }
                    }
                />
                :
                <div >{
     text}  <a onClick={
     ()=>{
     
                    this.setState({
     
                        edit: true
                    })
                }}>编辑</a>
                </div>
            }
      </div>);
   }

参考：https://github.com/6xiaoDi/Projec-React-hooks-enterprise-level-mbapp/tree/as0.02-3
Branch： bhStudy-Hooks

commit description：as0.02-3-example02-3（react的生命周期useEffect使用——实现失去焦点切换回文字状态）

tag：as0.02-3

3.1.4 example02-4

生命周期函数——组件挂载完毕、更新完毕阶段

import React,{
     Component,useState} from "react";
 
class Effect extends Component{
     
   state = {
     
        text: "这是今天的进度",
        edit: false  // 是否显示编辑状态
   }
   setEditState=(edit)=>{
     
        this.setState({
     
            edit
        });
   }
 
   componentDidMount(){
     
       console.log("组件挂载完毕");
   }
 
   componentDidUpdate(){
     
       console.log("组件更新完毕");
   }
 
   render(){
     
      let {
     text,edit} = this.state;
      return (<div>
            {
     edit?
                <input
                    type="text"
                    value={
     text}
                    onChange={
     
                        (e) => {
     
                            this.setState({
     
                            text:e.target.value
                            })
                        }
                    }
                    onBlur={
     
                        ()=>{
     
                            this.setState({
     
                                edit:false
                            })
                        }
                    }
                />
                :
                <div >{
     text}  <a onClick={
     ()=>{
     
                    this.setState({
     
                        edit: true
                    })
                }}>编辑</a>
                </div>
            }
      </div>);
   }
}
 
export default Effect;

组件更新完毕打印了好几次，因为我们更新了好几次，更新之后组件又会重新渲染。

3.1.5 example02-4

发现类组件使用生命周期，信息传递比较麻烦加入，建议融入函数式组件。

import React,{
     Component,useState} from "react";
 
function Txt(props){
     
    let {
     text,setEdit} = props;
 
    return (
        <div>{
     text}<a onClick={
     ()=>{
     
            setEdit(true);
        }}>编辑</a></div>
    );
}
 
class Effect extends Component{
     
   state = {
     
        text: "这是今天的进度",
        edit: false  // 是否显示编辑状态
   }
 
   // 更新编辑方法
   setEditState=(edit)=>{
     
        this.setState({
     
            edit
        });
   }
 
 
   componentDidMount(){
     
       console.log("组件挂载完毕");
   }
 
   componentDidUpdate(){
     
       console.log("组件更新完毕");
   }
 
   render(){
     
      let {
     text,edit} = this.state;
      return (<div>
            {
     edit?
                <input
                    type="text"
                    value={
     text}
                    onChange={
     
                        (e) => {
     
                            this.setState({
     
                            text:e.target.value
                            })
                        }
                    }
                    onBlur={
     
                        ()=>{
     
                            this.setEditState(false);
                        }
                    }
                />
                :
                <Txt text={
     text} setEdit={
     this.setEditState}/>
            }
      </div>);
   }
}
 
export default Effect;

参考：https://github.com/6xiaoDi/Projec-React-hooks-enterprise-level-mbapp/tree/as0.02-5
Branch： bhStudy-Hooks

commit description：as0.02-5-example02-5（react的生命周期useEffect使用——生命周期函数—组件挂载完毕、更新完毕，融入函数式组件）

tag：as0.02-5

3.1.6 example02-6

生命周期函数——组件卸载完毕（函数式组件）

import React,{
     Component,useState} from "react";
 
class Txt extends Component{
     
    componentWillUnmount(){
     
        console.log("组件即将卸载");
    }
    render(){
     
        let {
     text,setEdit} = this.props;
        return (
            <div>{
     text}<a onClick={
     ()=>{
     
                setEdit(true);
            }}>编辑</a></div>
        );
    }
}
 
class Effect extends Component{
     
   state = {
     
        text: "这是今天的进度",
        edit: false  // 是否显示编辑状态
   }
 
   // 更新编辑方法
   setEditState=(edit)=>{
     
        this.setState({
     
            edit
        });
   }
 
 
   componentDidMount(){
     
       console.log("组件挂载完毕");
   }
 
   componentDidUpdate(){
     
       console.log("组件更新完毕");
   }
 
   render(){
     
      let {
     text,edit} = this.state;
      return (<div>
            {
     edit?
                <input
                    type="text"
                    value={
     text}
                    onChange={
     
                        (e) => {
     
                            this.setState({
     
                            text:e.target.value
                            })
                        }
                    }
                    onBlur={
     
                        ()=>{
     
                            this.setEditState(false);
                        }
                    }
                />
                :
                <Txt text={
     text} setEdit={
     this.setEditState}/>
            }
      </div>);
   }
}
 
export default Effect;

点击编辑后，Txt组件就会被卸载，紧接着渲染input组件。

参考：https://github.com/6xiaoDi/Projec-React-hooks-enterprise-level-mbapp/tree/as0.02-6
Branch： bhStudy-Hooks

commit description：as0.02-6-example02-6（react的生命周期useEffect使用——生命周期函数—组件挂载完毕、更新完毕，组件卸载完毕（函数式组件））

tag：as0.02-6

3.1.7 example02-7

以上主要演示的是类组件的生命周期，现在完全用函数式组件演示生命周期。实际上hooks并没有生命周期，Effect副作用回调，实际就是以上三个生命周期，组件挂载完毕、更新完毕，组件即将卸载，用Effect呈现。

import React, {
      Component, useState, useEffect } from 'react';
 
function Txt(props){
     
    let {
     text,setEdit} = props;
    useEffect(()=>{
     
        console.log("组件状态有变化了");
    });
    return (
        <div>{
     text}<a onClick={
     ()=>{
     
            setEdit(true);
        }}>编辑</a></div>
    );
}
function Effect(){
     
    const [text,setText] = useState("这是今天的课程");
    const [edit,setEdit] = useState(false);
    // useEffect接收回调函数
    useEffect(()=>{
     
        console.log("状态有改变");
    });
    return (<div>
        {
     edit?
            <input
                type="text"
                value = {
     text}
                onChange = {
     
                    (e)=>{
     
                        setText(e.target.value);
                    }
                }
                onBlur = {
     
                    ()=>{
     
                        setEdit(false)
                    }
                }
            />
            :
            <Txt text={
     text} setEdit={
     setEdit} />
        }
    </div>);
}
 
export default Effect;

首页渲染的时候两个组件都打印出来变化，点击编辑发现Effect打印了变化，而Txt组件未打印变化。

然后失去焦点，再重新渲染的时候，两个组件都发生了变化。

我们发现这个时候貌似监听组件卸载了，其实是可以监听的，只是写法变了。

参考：https://github.com/6xiaoDi/Projec-React-hooks-enterprise-level-mbapp/tree/as0.02-7
Branch： bhStudy-Hooks

commit description：as0.02-7-example02-7（react的生命周期useEffect使用——用函数式组件演示生命周期，缺组件即将卸载的周期）

tag：as0.02-7

3.1.8 example02-8

演示组件挂载完毕、更新完毕，组件即将卸载，用Effect呈现。

import React, {
      Component, useState, useEffect } from 'react';
 
function Txt(props){
     
    let {
     text,setEdit} = props;
    useEffect(()=>{
     
        console.log("组件状态有变化了");
        return ()=>{
     
            console.log("txt组件卸载了");
        }
    });
    return (
        <div>{
     text}<a onClick={
     ()=>{
     
            setEdit(true);
        }}>编辑</a></div>
    );
}
function Effect(){
     
    const [text,setText] = useState("这是今天的课程");
    const [edit,setEdit] = useState(false);
    // useEffect接收回调函数
    useEffect(()=>{
     
        console.log("状态有改变");
    });
    return (<div>
        {
     edit?
            <input
                type="text"
                value = {
     text}
                onChange = {
     
                    (e)=>{
     
                        setText(e.target.value);
                    }
                }
                onBlur = {
     
                    ()=>{
     
                        setEdit(false)
                    }
                }
            />
            :
            <Txt text={
     text} setEdit={
     setEdit} />
        }
    </div>);
}
 
export default Effect;

参考：https://github.com/6xiaoDi/Projec-React-hooks-enterprise-level-mbapp/tree/as0.02-8
Branch： bhStudy-Hooks

commit description：as0.02-8-example02-8（react的生命周期useEffect使用——用函数式组件演示生命周期，完成）

tag：as0.02-8

useEffect意思是副作用，其实就相当于类组件的componentDidMount、componentDidUpdate 和 componentWillUnmount

3.2 example03

需要清除的副作用

我们不仅要检测组件状态变化，可能需要检测更具体一些，检测到具体哪个组件变化了？或者组件仅仅在卸载的时候执行等等，如何处理呢？

需求：页面文字很多，会有滚动条，实现input框始终保持在顶部不随滚动条变化。

3.2.1 example03-1

框子

import React, {
     useState, useEffect } from 'react';
 
function Txt(props){
     
    let {
     text,setEdit} = props;
    return (
        <div>{
     text}<a onClick={
     ()=>{
     
            setEdit(true);
        }}>编辑</a></div>
    );
}

function Edit(props){
     
    const {
     text,setText,setEdit} = props;
    return (<input
        type="text"
        value = {
     text}
        onChange = {
     
            (e)=>{
     
                setText(e.target.value);
            }
        }
        onBlur = {
     
            ()=>{
     
                setEdit(false)
            }
        }
    />)
}

function Effect(){
     
    const [text,setText] = useState("这是今天的课程");
    const [edit,setEdit] = useState(false);
    return (<div>
        {
     edit?
            <Edit
                text = {
     text}
                setText = {
     setText}
                setEdit = {
     setEdit}
            />
            :
            <Txt text={
     text} setEdit={
     setEdit} />
        }
        {
     [...(".".repeat(100))].map((item,index)=>{
     
            return <div key={
     index}>页面内容填充</div>
        })}
    </div>);
}
 
 
export default Effect;

参考：https://github.com/6xiaoDi/Projec-React-hooks-enterprise-level-mbapp/tree/as0.03-1
Branch： bhStudy-Hooks

commit description：as0.03-1-example03-1（react的生命周期useEffect使用——实现input框始终保持在顶部不随滚动条变化-框子实现）

tag：as0.03-1

3.2.2 example03-2

监听组件状态变化

function Edit(props){
     
    const {
     text,setText,setEdit} = props;
    useEffect(()=>{
     
        console.log("Edit组件更新了");
    });
    return (<input
        type="text"
        value = {
     text}
        onChange = {
     
            (e)=>{
     
                setText(e.target.value);
            }
        }
        onBlur = {
     
            ()=>{
     
                setEdit(false)
            }
        }
    />)
}

以上只是针对组件的挂载完毕和更新完毕才会触发。只要其中之一的状态发生变化，它就会触发。

但是有的时候，这个副作用只想监听某一个状态的变化，而其他状态变化并不会触发，这要如何处理呢？

参考：https://github.com/6xiaoDi/Projec-React-hooks-enterprise-level-mbapp/tree/as0.03-2
Branch： bhStudy-Hooks

commit description：as0.03-2-example03-2（react的生命周期useEffect使用——实现input框始终保持在顶部不随滚动条变化-监听组件状态变化）

tag：as0.03-2

3.2.3 example03-3

只监听 edit发生改变

useEffect第二个参数是当第二个参数的状态发生改变，才会触发该函数

function Effect(){
     
    const [text,setText] = useState("这是今天的课程");
    const [edit,setEdit] = useState(false);
    // 只监听 edit 发生改变
    useEffect(()=>{
     
        console.log("组件更新了");
    },edit);
    return (<div>
        {
     edit?
            <Edit
                text = {
     text}
                setText = {
     setText}
                setEdit = {
     setEdit}
            />
            :
            <Txt text={
     text} setEdit={
     setEdit} />
        }
        {
     [...(".".repeat(100))].map((item,index)=>{
     
            return <div key={
     index}>页面内容填充</div>
        })}
    </div>);
}

但是报错了（先不管）。

useEffect的第二个参数实际是一个数组，数组里是它要监测的值，即可以监测多个值发生变化。

    useEffect(()=>{
     
        console.log("组件更新了");
    },[edit,text]);

    useEffect(()=>{
     
        console.log("组件更新了");
    },[edit]);

编辑状态发生变化才会触发，而text改变的时候并没有执行了。

如果只希望组件挂载的时候执行，只要传入空数组就行了。

    useEffect(()=>{
     
        console.log("组件更新了");
    },[]);

参考：https://github.com/6xiaoDi/Projec-React-hooks-enterprise-level-mbapp/tree/as0.03-3
Branch： bhStudy-Hooks

commit description：as0.03-3-example03-3（react的生命周期useEffect使用——实现input框始终保持在顶部不随滚动条变化-监听特定组件状态变化）

tag：as0.03-3

3.2.4 example03-4

注意不要忽略useEffect第二个参数的设置，否则会出问题。

import React, {
     useState, useEffect } from 'react';
 
function Txt(props){
     
    let {
     text,setEdit} = props;
    return (
        <div>{
     text}<a onClick={
     ()=>{
     
            setEdit(true);
        }}>编辑</a></div>
    );
}
function Edit(props){
     
    const {
     text,setText,setEdit} = props;
    useEffect(()=>{
     
        window.addEventListener("scroll",()=>{
     
            console.log(document.querySelector("#txt"));
        });
        console.log(1);
    })
    return (<input
        type="text"
        value = {
     text}
        id = "txt"
        onChange = {
     
            (e)=>{
     
                setText(e.target.value);
            }
        }
        onBlur = {
     
            ()=>{
     
                setEdit(false)
            }
        }
    />)
}
function Effect(){
     
    const [text,setText] = useState("这是今天的课程");
    const [edit,setEdit] = useState(false);
    useEffect(()=>{
     
        console.log("Effect组件更新了");
    },[]);
    return (<div>
        {
     edit?
            <Edit
                text = {
     text}
                setText = {
     setText}
                setEdit = {
     setEdit}
            />
            :
            <Txt text={
     text} setEdit={
     setEdit} />
        }
        {
     [...(".".repeat(100))].map((item,index)=>{
     
            return <div key={
     index}>页面内容填充</div>
        })}
    </div>);
}
 
 
export default Effect;

我们发现滚动条滚动的时候，会触发很多次事件，那是因为，事件添加了很多次（每次触发useEffect，都会追加事件监听）。

参考：https://github.com/6xiaoDi/Projec-React-hooks-enterprise-level-mbapp/tree/as0.03-4
Branch： bhStudy-Hooks

commit description：as0.03-4-example03-4（react的生命周期useEffect使用——实现input框始终保持在顶部不随滚动条变化-注意不要忽略useEffect第二个参数的设置，否则会出问题。）

tag：as0.03-4

3.2.5 example03-5

希望Edit组件第一次挂载的时候执行一次，后面就不要重复执行了。

我们添加事件监听，也就可以仅仅添加一次了。

import React, {
     useState, useEffect } from 'react';
 
function Txt(props){
     
    let {
     text,setEdit} = props;
    return (
        <div>{
     text}<a onClick={
     ()=>{
     
            setEdit(true);
        }}>编辑</a></div>
    );
}
function Edit(props){
     
    const {
     text,setText,setEdit} = props;
    function toScroll(){
     
        let txt = document.querySelector("#txt");
        let y = window.scrollY;
        // 修改位移值相对于滚动条进行位移
        txt.style.transform = `translateY(${
       y}px)`;
        console.log(y);
    }
    useEffect(()=>{
     
        window.addEventListener("scroll",toScroll);
    },[])
    return (<input
        type="text"
        value = {
     text}
        id = "txt"
        onChange = {
     
            (e)=>{
     
                setText(e.target.value);
            }
        }
        onBlur = {
     
            ()=>{
     
                setEdit(false)
            }
        }
    />)
}
function Effect(){
     
    const [text,setText] = useState("这是今天的课程");
    const [edit,setEdit] = useState(false);
    useEffect(()=>{
     
        console.log("Effect组件更新了");
    },[]);
    return (<div>
        {
     edit?
            <Edit
                text = {
     text}
                setText = {
     setText}
                setEdit = {
     setEdit}
            />
            :
            <Txt text={
     text} setEdit={
     setEdit} />
        }
        {
     [...(".".repeat(100))].map((item,index)=>{
     
            return <div key={
     index}>页面内容填充</div>
        })}
    </div>);
}
 
 
export default Effect;

然而出现有点跳的情况，可以用绝对定位和固定定位来解决这个问题，这里不是重点也就不解决了。

不过仍然存在问题，我们发现组件卸载了之后，事件仍然在触发。如果观察F12的Elements的input标签实际已经被卸载了，因此这种情况出现，就很容易报错或发生奇异的问题。虽然元素已经从dom中卸载，但还存在内存中。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SpoR9sp8-1595228445478)(https://cdn.jsdelivr.net/gh/6xiaoDi/blogpic/images/20200709_01/20200709131822.gif)]

参考：https://github.com/6xiaoDi/Projec-React-hooks-enterprise-level-mbapp/tree/as0.03-5
Branch： bhStudy-Hooks

commit description：as0.03-5-example03-5（react的生命周期useEffect使用——实现input框始终保持在顶部不随滚动条变化-添加事件监听，仅仅添加一次了，但出了问题。）

tag：as0.03-5

3.2.6 example03-6

需要清除的副作用

组件卸载之后，需要把事件也删除了。

import React, {
     useState, useEffect } from 'react';
 
function Txt(props){
     
    let {
     text,setEdit} = props;
    return (
        <div>{
     text}<a onClick={
     ()=>{
     
            setEdit(true);
        }}>编辑</a></div>
    );
}
function Edit(props){
     
    const {
     text,setText,setEdit} = props;
    function toScroll(){
     
        let txt = document.querySelector("#txt");
        let y = window.scrollY;
        // 修改位移值相对于滚动条进行位移
        txt.style.transform = `translateY(${
       y}px)`;
        console.log(y);
    }
    useEffect(()=>{
     
        window.addEventListener("scroll",toScroll);
        return ()=>{
     
            console.log("Edit组件卸载了");
            window.removeEventListener("scroll",toScroll);
        }
    },[])
    return (<input
        type="text"
        value = {
     text}
        id = "txt"
        onChange = {
     
            (e)=>{
     
                setText(e.target.value);
            }
        }
        onBlur = {
     
            ()=>{
     
                setEdit(false)
            }
        }
    />)
}
function Effect(){
     
    const [text,setText] = useState("这是今天的课程");
    const [edit,setEdit] = useState(false);
    useEffect(()=>{
     
        console.log("Effect组件更新了");
    },[]);
    return (<div>
        {
     edit?
            <Edit
                text = {
     text}
                setText = {
     setText}
                setEdit = {
     setEdit}
            />
            :
            <Txt text={
     text} setEdit={
     setEdit} />
        }
        {
     [...(".".repeat(100))].map((item,index)=>{
     
            return <div key={
     index}>页面内容填充</div>
        })}
    </div>);
}
 
 
export default Effect;

参考：https://github.com/6xiaoDi/Projec-React-hooks-enterprise-level-mbapp/tree/as0.03-6
Branch： bhStudy-Hooks

commit description：as0.03-6-example03-6（react的生命周期useEffect使用——实现input框始终保持在顶部不随滚动条变化-添加事件监听，仅仅添加一次了，组件卸载之后，需要把事件也删除了。）

tag：as0.03-6

3.2.7 小结

如果希望挂载阶段和更新阶段都执行useEffect，那就别加第二个参数。

第二个参数为空数组，默认只在挂载阶段执行。

如果仅仅希望更新阶段执行，同样也别加第二个参数，但需要再引进一个开关变量来控制。

希望卸载阶段完成，就返回一个函数来进行卸载工作。

4. useRef

4.1 example04

上面案例，实际上切换到input框的时候，焦点实际是自动聚焦上去的（我们这里没有）。这个如何实现呢？需要加上focus。

获取dom节点，在类组件中用ref，到了hooks用useRef。

另外它还有别的作用，之前组件更新的时候，可获取上次状态和当前次状态进行对比，但通过useEffect拿不到之前的状态，如果想获取上次的状态如何处理呢？

这就需要用到了useRef。

4.1.1 example04-1

useRef最基本作用就是保存子组件、dom。

实现input组件在挂载后，可以直接获取到焦点，省得还得点击一下，不点就没有焦点，自然就没有失焦。

import React, {
     useState, useEffect, useRef } from 'react';
 
function Txt(props){
     
    let {
     text,setEdit} = props;
    return (
        <div>{
     text}<a onClick={
     ()=>{
     
            setEdit(true);
        }}>编辑</a></div>
    );
}
 
function Edit(props){
     
    const {
     text,setText,setEdit} = props;
    let t = useRef();
    console.log(t);
    function toScroll(){
     
        let txt = document.querySelector("#txt");
        let y = window.scrollY;
        // 修改位移值相对于滚动条进行位移
        txt.style.transform = `translateY(${
       y}px)`;
        console.log(y);
    }
    useEffect(()=>{
     
        window.addEventListener("scroll",toScroll);
        return ()=>{
     
            console.log("Edit组件卸载了");
            window.removeEventListener("scroll",toScroll);
        }
    },[])
    return (<input
        type="text"
        value = {
     text}
        id = "txt"
        onChange = {
     
            (e)=>{
     
                setText(e.target.value);
            }
        }
        onBlur = {
     
            ()=>{
     
                setEdit(false)
            }
        }
    />)
}
function Ref(){
     
    const [text,setText] = useState("这是今天的课程");
    const [edit,setEdit] = useState(false);
    useEffect(()=>{
     
        console.log("Effect组件更新了");
    },[]);
    return (<div>
        {
     edit?
            <Edit
                text = {
     text}
                setText = {
     setText}
                setEdit = {
     setEdit}
            />
            :
            <Txt text={
     text} setEdit={
     setEdit} />
        }
        {
     [...(".".repeat(100))].map((item,index)=>{
     
            return <div key={
     index}>页面内容填充</div>
        })}
    </div>);
}
 
 
export default Ref;

打印出看到useRef返回一个对象，对象下有一个属性叫current。

current可以设置一个初始值。

function Edit(props){
     
    const {
     text,setText,setEdit} = props;
    let t = useRef(1);
    console.log(t);
    ......
    }

current一般设置为null，希望子组件初始为空对象，使用起来和ref没有太大的区别。

import React, {
     useState, useEffect, useRef } from 'react';
 
function Txt(props){
     
    let {
     text,setEdit} = props;
    return (
        <div>{
     text}<a onClick={
     ()=>{
     
            setEdit(true);
        }}>编辑</a></div>
    );
}
 
function Edit(props){
     
    const {
     text,setText,setEdit} = props;
    let t = useRef(null);
    function toScroll(){
     
        let txt = document.querySelector("#txt");
        let y = window.scrollY;
        // 修改位移值相对于滚动条进行位移
        txt.style.transform = `translateY(${
       y}px)`;
        console.log(y);
    }
    useEffect(()=>{
     
        console.log(t);
        window.addEventListener("scroll",toScroll);
        return ()=>{
     
            console.log("Edit组件卸载了");
            window.removeEventListener("scroll",toScroll);
        }
    },[])
    return (<input
        type="text"
        value = {
     text}
        id = "txt"
        ref={
     t}
        onChange = {
     
            (e)=>{
     
                setText(e.target.value);
            }
        }
        onBlur = {
     
            ()=>{
     
                setEdit(false)
            }
        }
    />)
}
function Ref(){
     
    const [text,setText] = useState("这是今天的课程");
    const [edit,setEdit] = useState(false);
    useEffect(()=>{
     
        console.log("Effect组件更新了");
    },[]);
    return (<div>
        {
     edit?
            <Edit
                text = {
     text}
                setText = {
     setText}
                setEdit = {
     setEdit}
            />
            :
            <Txt text={
     text} setEdit={
     setEdit} />
        }
        {
     [...(".".repeat(100))].map((item,index)=>{
     
            return <div key={
     index}>页面内容填充</div>
        })}
    </div>);
}
 
 
export default Ref;

参考：https://github.com/6xiaoDi/Projec-React-hooks-enterprise-level-mbapp/tree/as0.04-1
Branch： bhStudy-Hooks

commit description：as0.04-1-example04-1（useRef——useRef最基本作用）

tag：as0.04-1

4.1.2 example04-2

通过上例发现其实就不需要用原生获取dom节点了，切换到input框的时候，焦点是自动聚焦上去的，并且选中文字。

import React, {
     useState, useEffect, useRef } from 'react';
 
function Txt(props){
     
    let {
     text,setEdit} = props;
    return (
        <div>{
     text}<a onClick={
     ()=>{
     
            setEdit(true);
        }}>编辑</a></div>
    );
}
 
function Edit(props){
     
    const {
     text,setText,setEdit} = props;
    let t = useRef(null);
    function toScroll(){
     
        let y = window.scrollY;
        // 修改位移值相对于滚动条进行位移
        t.current.style.transform = `translateY(${
       y}px)`;
        console.log(y);
    }
    useEffect(()=>{
     
        window.addEventListener("scroll",toScroll);
        t.current.select();
        return ()=>{
     
            window.removeEventListener("scroll",toScroll);
        }
    },[])
    return (<input
        type="text"
        value = {
     text}
        id = "txt"
        ref={
     t}
        onChange = {
     
            (e)=>{
     
                setText(e.target.value);
            }
        }
        onBlur = {
     
            ()=>{
     
                setEdit(false)
            }
        }
    />)
}
function Ref(){
     
    const [text,setText] = useState("这是今天的课程");
    const [edit,setEdit] = useState(false);
    useEffect(()=>{
     
        console.log("Effect组件更新了");
    },[]);
    return (<div>
        {
     edit?
            <Edit
                text = {
     text}
                setText = {
     setText}
                setEdit = {
     setEdit}
            />
            :
            <Txt text={
     text} setEdit={
     setEdit} />
        }
        {
     [...(".".repeat(100))].map((item,index)=>{
     
            return <div key={
     index}>页面内容填充</div>
        })}
    </div>);
}
 
 
export default Ref;

参考：https://github.com/6xiaoDi/Projec-React-hooks-enterprise-level-mbapp/tree/as0.04-2
Branch： bhStudy-Hooks

commit description：as0.04-2-example04-2（useRef——焦点是自动聚焦）

tag：as0.04-2

4.2 example05

useRef除此之外它还能保存之前的值或者状态。

4.2.1 example05-1

import React, {
     useState, useEffect, useRef } from 'react';
 
function Txt(props){
     
    let {
     text,setEdit} = props;
    return (
        <div>{
     text}<a onClick={
     ()=>{
     
            setEdit(true);
        }}>编辑</a></div>
    );
}
function Edit(props){
     
    const {
     text,setText,setEdit} = props;
    let t = useRef(null);
 
    function toScroll(){
     
        let y = window.scrollY;
        t.current.style.transform = `translateY(${
       y}px)`;
        console.log(y);
    }
    useEffect(()=>{
     
        window.addEventListener("scroll",toScroll);
        t.current.select();
        return ()=>{
     
            window.removeEventListener("scroll",toScroll);
        }
    },[])
    return (<input
        type="text"
        value = {
     text}
        id = "txt"
        ref = {
     t}
        onChange = {
     
            (e)=>{
     
                setText(e.target.value);
            }
        }
        onBlur = {
     
            ()=>{
     
                setEdit(false)
            }
        }
    />)
}
 
function Ref(){
     
    const [nub,setNub] = useState(0);
    const prev = useRef(nub);
 
    return (<div>
        <p>当前值: {
     nub}</p>
        <p>上次值: {
     prev.current}</p>
        <button onClick={
     ()=>{
     
            setNub(nub + 1);
        }}>递增</button>
    </div>);
}
 
 
export default Ref;

发现只增加了当前值，但是上次值不动。

参考：https://github.com/6xiaoDi/Projec-React-hooks-enterprise-level-mbapp/tree/as0.05-1
Branch： bhStudy-Hooks

commit description：as0.05-1-example05-1（useRef——记录上次值但没有更新）

tag：as0.05-1

4.2.2 example05-2

useRef怎么记录上次值呢？

首先我们知道state的变化会导致组件的重新渲染，我们这里已经能看到新值重新渲染了，而ref并没有改变。

正常情况下组件更新是不会影响ref改变的，除非我们对ref做了绑定，此时我们并没把它与dom节点（子组件）绑定。这里回顾一下useEffect，副作用的钩子是在什么情形下执行的呢？

组件更新完或者组件挂载完才会执行，在这里组件挂载完后，状态更新完实际先更新dom，更新完dom后才会执行副作用钩子。我们先看效果：

function Ref(){
     
    const [nub,setNub] = useState(0);
    const prev = useRef(nub);
    useEffect(()=>{
     
        prev.current = nub;
    });
    return (<div>
        <p>当前值: {
     nub}</p>
        <p>上次值: {
     prev.current}</p>
        <button onClick={
     ()=>{
     
            setNub(nub + 1);
        }}>递增</button>
    </div>);
}

我们再分析代码：首先设置一个state，并不执行useEffect。首先先把函数组件返回值挂载到dom中，挂载后才会更新副作用钩子，然后把nub最新值同步到ref中。然后等到再次修改的时候，修改完状态，会更新我们dom，这回的ref是没有改变的，是上一次的值。更新完毕后，才会执行副作用钩子，才会更新ref，记录最新的值。

参考：https://github.com/6xiaoDi/Projec-React-hooks-enterprise-level-mbapp/tree/as0.05-2
Branch： bhStudy-Hooks

commit description：as0.05-2-example05-2（useRef——记录上次值并实时更新）

tag：as0.05-2

5. 综合实例（官网实例）——TodoLists

这样经常使用的钩子，我们已经说明了基本的功能。我们来做一个案例练习MVVM框架的入门练习：TodoLists。

输入内容回车之后，可添加到下面的信息栏。除了这个添加功能之外还有可以选中任务，代表这个任务做完了。还有全选和全不选的功能。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7kwJmc8w-1595228445509)(https://cdn.jsdelivr.net/gh/6xiaoDi/blogpic/images/20200709_01/20200709155517.gif)]

以及删除功能，删除同时会同步全选和全不选的功能，除此之外还可以清除所有已完成的任务。以及单对单条的编辑功能。

我们仔细观察todolist的静态文件，再移植到react

5.1 example06

实现TodoLists

5.1.1 example06-1

框子实现——对照其静态html文件复制即可。

将样式抽取出来index.css。

将其划分为index.js，下面有header.js、mian.js、footer.js组件。

mian.js内容比较多，为了功能独立，我们再单另把li拿出来封装，偷懒就不再新建js文件了，就在该文件中新建一个子组件。

但注意组件中style属性是对象，而不是html中的字符串（可以先删掉）；并且受控组件事件也需要添加；html中for属性在组件中为htmlFor；class属性在组件中为className。（如果是WebStorm会自动帮我们替换，但是style还是不行，建议先删除再弄！）

code\project\study-hooks\react-app\src\todos\index.css

html,
body {
     
    margin: 0;
    padding: 0;
}
 
body {
     
    font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1.4em;
    background: #eeeeee;
    color: #333333;
    width: 520px;
    margin: 0 auto;
    -webkit-font-smoothing: antialiased;
}
 
#todoapp {
     
    background: #fff;
    padding: 20px;
    margin-bottom: 40px;
    -ms-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
    -o-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
    box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
    border-radius: 0 0 5px 5px;
}
 
#todoapp h1 {
     
    font-size: 36px;
    font-weight: bold;
    text-align: center;
    padding: 0 0 10px 0;
}
 
#todoapp input[type="text"] {
     
    width: 466px;
    font-size: 24px;
    font-family: inherit;
    line-height: 1.4em;
    border: 0;
    outline: none;
    padding: 6px;
    border: 1px solid #999999;
    -ms-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
    -o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
}
 
#todoapp input::-webkit-input-placeholder {
     
    font-style: italic;
}
 
#main {
     
    display: none;
}
 
#todo-list {
     
    margin: 10px 0;
    padding: 0;
    list-style: none;
}
 
#todo-list li {
     
    padding: 18px 20px 18px 0;
    position: relative;
    font-size: 24px;
    border-bottom: 1px solid #cccccc;
}
 
#todo-list li:last-child {
     
    border-bottom: none;
}
 
#todo-list li.done label {
     
    color: #777777;
    text-decoration: line-through;
}
 
#todo-list .destroy {
     
    position: absolute;
    right: 5px;
    top: 20px;
    display: none;
    cursor: pointer;
    width: 20px;
    height: 20px;
    background: url(destroy.png) no-repeat;
}
 
#todo-list li:hover .destroy {
     
    display: block;
}
 
#todo-list .destroy:hover {
     
    background-position: 0 -20px;
}
 
#todo-list li.editing {
     
    border-bottom: none;
    margin-top: -1px;
    padding: 0;
}
 
#todo-list li.editing:last-child {
     
    margin-bottom: -1px;
}
 
#todo-list li.editing .edit {
     
    display: block;
    width: 444px;
    padding: 13px 15px 14px 20px;
    margin: 0;
}
 
#todo-list li.editing .view {
     
    display: none;
}
 
#todo-list li .view label {
     
    word-break: break-word;
}
 
#todo-list li .edit {
     
    display: none;
}
 
#todoapp footer {
     
    display: none;
    margin: 0 -20px -20px -20px;
    overflow: hidden;
    color: #555555;
    background: #f4fce8;
    border-top: 1px solid #ededed;
    padding: 0 20px;
    line-height: 37px;
    border-radius: 0 0 5px 5px;
}
 
#clear-completed {
     
    float: right;
    line-height: 20px;
    text-decoration: none;
    background: rgba(0, 0, 0, 0.1);
    color: #555555;
    font-size: 11px;
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 0 10px 1px;
    cursor: pointer;
    border-radius: 12px;
    -ms-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
    -o-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
    box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
}
 
#clear-completed:hover {
     
    background: rgba(0, 0, 0, 0.15);
    -ms-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
    -o-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
    box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
}
 
#clear-completed:active {
     
    position: relative;
    top: 1px;
}
 
#todo-count span {
     
    font-weight: bold;
}
 
#instructions {
     
    margin: 10px auto;
    color: #777777;
    text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
    text-align: center;
}
 
#instructions a {
     
    color: #336699;
}
 
#credits {
     
    margin: 30px auto;
    color: #999;
    text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
    text-align: center;
}
 
#credits a {
     
    color: #888;
}

code\project\study-hooks\react-app\src\todos\index.js

import React, {
     useState, useEffect, useRef } from 'react';
import "./index.css"
import Header from "./header";
import Main from  "./main"
import Footer from "./footer";
 
function Todos(){
     
 
    return (<div id="todoapp">
        <Header/>
        <Main/>
        <Footer/>
    </div>);
}
 
 
export default Todos;

code\project\study-hooks\react-app\src\todos\header.js

import React, {
     useState} from 'react';
function Header(){
     
 
  return (<header>
            <h1>Todos</h1>
            <input id="new-todo" type="text" placeholder="What needs to be done?" value=""/>
         </header>);
}
 
 
export default Header;

code\project\study-hooks\react-app\src\todos\main.js

import React, {
     useState, useEffect, useRef } from 'react';
function Li(){
     
    return (
        <li className="">
            <div className="view" >
                <input className="toggle" type="checkbox"/>
                <label>213213</label>
                <a className="destroy">
 
                </a>
            </div>
            <input className="edit" type="text" value="213213"/>
        </li>
    )
}
 
function Mian(){
     
  return (
      <section id="main" >
          <input id="toggle-all" type="checkbox" checked=""/>
          <label htmlFor="toggle-all">Mark all as complete</label>
          <ul id="todo-list">
              <Li/>
          </ul>
      </section>
    );
}
 
 
export default Mian;

code\project\study-hooks\react-app\src\todos\footer.js

import React from 'react';
function Footer(){
     
      return (
          <footer >
              <a id="clear-completed" >Clear 0 completed item</a>
              <div id="todo-count">10 items left</div>
          </footer>
      );
}
 
 
export default Footer;

参考：https://github.com/6xiaoDi/Projec-React-hooks-enterprise-level-mbapp/tree/as0.06-1
Branch： bhStudy-Hooks

commit description：as0.06-1-example06-1（实现TodoLists——静态框子）

tag：as0.06-1

5.1.2 example06-2

在index中首先建立所有存储TODO的状态，用数组来保存。

写个方法实现添加功能，并将添加方法传给子组件Header，同样在Header组件中首先建立所有存储TODO的状态，用字符串来保存，并将其内的input组件做成受控组件，通过onchange事件来更新todo状态值。

在Header组件中添加回车事件，如果内容为空则提示并让焦点回到input框上，如果不为空则调用父组件传进的回调函数，并将todo作为参数传过去。

code\project\study-hooks\react-app\src\todos\index.js

import React, {
     useState, useEffect, useRef } from 'react';
import "./index.css"
import Header from "./header";
import Main from  "./main"
import Footer from "./footer";
 
function Todos(){
     
    // 用数组来保存所有TODO状态
    const [todos,setTodos] = useState([]);
 
    function addTodo(val){
     
        console.log(val);
    }
 
 
    return (<div id="todoapp">
        <Header addTodo = {
     addTodo}/>
        <Main/>
        <Footer/>
    </div>);
}
 
 
export default Todos;

code\project\study-hooks\react-app\src\todos\header.js

import React, {
     useState} from 'react';
function Header(props){
     
    const [todo,setTodo] = useState("");
    let {
     addTodo} = props;
    return (<header>
            <h1>Todos</h1>
            <input
                id="new-todo"
                type="text"
                placeholder="What needs to be done?"
                value={
     todo}
                onChange={
     (e) => {
     
                        setTodo(e.target.value);
                    }
                }
 
                onKeyDown={
     (e) => {
       // 回车事件
                    // 判断如果是回车
                    if (e.keyCode == 13){
     
                        if (!todo.trim()){
     
                            alert("输入内容不能为空！");
                            e.target.focus();
                        }else{
     
                            addTodo(todo);
                            // 清空
                            setTodo('');
                        }
                    }
                }}
            />
         </header>);
}
 
 
export default Header;

参考：https://github.com/6xiaoDi/Projec-React-hooks-enterprise-level-mbapp/tree/as0.06-2
Branch： bhStudy-Hooks

commit description：as0.06-2-example06-2（实现TodoLists——实现在Hear组件中将todo传递给父组件的回调函数）

tag：as0.06-2

5.1.3 example06-3

在index中添加todos，注意本身在这里todos是一个对象类型，setState在这里只是做了浅对比，如果只是往里push的话，并不能引起state的修改，因此我们先加入原先的内容，并对其做解构，再添加新内容的新对象。这样才能触发组件更新，否则组件是不会更新的。

code\project\study-hooks\react-app\src\todos\index.js

function Todos(){
     
    // 用数组来保存所有TODO状态
    const [todos,setTodos] = useState([]);
 
    function addTodo(val){
     
        console.log();
        setTodos([...todos,{
     
            id: Date.now(), // 实际工作中后端提供
            val,
            completed: false // 选中状态
        }]);
    }
 
    console.log(todos);
    return (<div id="todoapp">
        <Header addTodo = {
     addTodo}/>
        <Main/>
        <Footer/>
    </div>);
}

参考：https://github.com/6xiaoDi/Projec-React-hooks-enterprise-level-mbapp/tree/as0.06-3
Branch： bhStudy-Hooks

commit description：as0.06-3-example06-3（实现TodoLists——实现添加todos功能）

tag：as0.06-3

5.1.4 example06-4

实现拿到数据后，来完成后续的主体内容，显示并渲染。

code\project\study-hooks\react-app\src\todos\index.js

import React, {
     useState, useEffect, useRef } from 'react';
import "./index.css"
import Header from "./header";
import Main from  "./main"
import Footer from "./footer";
 
function Todos(){
     
    // 用数组来保存所有TODO状态
    const [todos,setTodos] = useState([]);
 
    function addTodo(val){
     
        console.log();
        setTodos([...todos,{
     
            id: Date.now(), // 实际工作中后端提供
            val,
            completed: false // 选中状态
        }]);
    }
 
    console.log(todos);
    return (<div id="todoapp">
        <Header addTodo = {
     addTodo}/>
        <Main todos={
     todos}/>
        <Footer/>
    </div>);
}
 
 
export default Todos;

code\project\study-hooks\react-app\src\todos\main.js

import React, {
     useState, useEffect, useRef } from 'react';
function Li(){
     
    return (
        <li className="">
            <div className="view" >
                <input className="toggle" type="checkbox"/>
                <label>213213</label>
                <a className="destroy">
 
                </a>
            </div>
            <input className="edit" type="text" value="213213"/>
        </li>
    )
}
 
function Mian(){
     
    let {
     todos} = this.props;
    return (
    <section
        id="main"
        style={
     {
     
            display: todos.length > 0 ? 'block' : 'none'
        }}
    >
        <input id="toggle-all" type="checkbox" checked=""/>
        <label htmlFor="toggle-all">Mark all as complete</label>
        <ul id="todo-list">
            <Li/>
        </ul>
    </section>
    );
}
 
 
export default Mian;

参考：https://github.com/6xiaoDi/Projec-React-hooks-enterprise-level-mbapp/tree/as0.06-4
Branch： bhStudy-Hooks

commit description：as0.06-4-example06-4（实现TodoLists——实现部分todos渲染功能）

tag：as0.06-4

5.1.5 example06-5

接下来把数据关联起来。

code\project\study-hooks\react-app\src\todos\main.js

import React, {
     useState, useEffect, useRef } from 'react';
 
function Li(props){
     
    let {
     inner} = props;
    return (
        <li className={
     inner.completed ? "done" : ""}>
            <div className="view" >
                <input
                    className="toggle"
                    type="checkbox"
                    checked={
     inner.completed}
                />
                <label>{
     inner.val}</label>
                <a className="destroy">
 
                </a>
            </div>
            <input
                className="edit"
                type="text"
                value={
     inner.val}
            />
        </li>
    )
}
 
function Mian(props){
     
    let {
     todos} = props;
    return (
    <section
        id="main"
        style={
     {
     
            display: todos.length > 0 ? 'block' : 'none'
        }}
    >
        <input id="toggle-all" type="checkbox" checked=""/>
        <label htmlFor="toggle-all">Mark all as complete</label>
        <ul id="todo-list">
            {
     
                todos.map(item=> {
     
                    return <Li
                        key = {
     item.id}
                        inner = {
     item}
                    />
                })
            }
        </ul>
    </section>
    );
}
 
 
export default Mian;

参考：https://github.com/6xiaoDi/Projec-React-hooks-enterprise-level-mbapp/tree/as0.06-5
Branch： bhStudy-Hooks

commit description：as0.06-5-example06-5（实现TodoLists——实现部分todos数据关联起来）

tag：as0.06-5

5.1.6 example06-6

将checkbox变为受控组件，实现改变勾选后，出现删除线。。

code\project\study-hooks\react-app\src\todos\index.js

import React, {
     useState, useEffect, useRef } from 'react';
import "./index.css"
import Header from "./header";
import Main from  "./main"
import Footer from "./footer";
 
function Todos(){
     
    // 用数组来保存所有TODO状态
    const [todos,setTodos] = useState([]);
 
    function addTodo(val){
     
        console.log();
        setTodos([...todos,{
     
            id: Date.now(), // 实际工作中后端提供
            val,
            completed: false // 选中状态
        }]);
    }
 
    // 修养修改的对应项id
    function changeCompleted(id,completed){
     
        todos.forEach(item=>{
     
            if(id == item.id){
     
                item.completed = completed;
            }
        });
        // 不能直接传todos，因为对比的时候是浅层对比，还是认为同一个对象，是不会进行更新的，我们应该解构出来返回一个新数组
        setTodos([...todos]);
    }
 
    console.log(todos);
    return (<div id="todoapp">
        <Header addTodo = {
     addTodo}/>
        <Main
            todos={
     todos}
            changeCompleted={
     changeCompleted}
        />
        <Footer/>
    </div>);
}
 
 
export default Todos;

code\project\study-hooks\react-app\src\todos\main.js

import React, {
     useState, useEffect, useRef } from 'react';
 
function Li(props){
     
    let {
     inner,changeCompleted} = props;
    return (
        <li className={
     inner.completed ? "done" : ""}>
            <div className="view" >
                <input
                    className="toggle"
                    type="checkbox"
                    checked={
     inner.completed}
                    onChange={
     (e)=>{
     
                        changeCompleted(inner.id,e.target.checked);
                    }}
                />
                <label>{
     inner.val}</label>
                <a className="destroy">
 
                </a>
            </div>
            <input
                className="edit"
                type="text"
                value={
     inner.val}
            />
        </li>
    )
}
 
function Mian(props){
     
    let {
     todos,changeCompleted} = props;
    return (
    <section
        id="main"
        style={
     {
     
            display: todos.length > 0 ? 'block' : 'none'
        }}
    >
        <input id="toggle-all" type="checkbox" checked=""/>
        <label htmlFor="toggle-all">Mark all as complete</label>
        <ul id="todo-list">
            {
     
                todos.map(item=> {
     
                    return <Li
                        key = {
     item.id}
                        inner = {
     item}
                        changeCompleted = {
     changeCompleted}
                    />
                })
            }
        </ul>
    </section>
    );
}
 
 
export default Mian;

参考：https://github.com/6xiaoDi/Projec-React-hooks-enterprise-level-mbapp/tree/as0.06-6
Branch： bhStudy-Hooks

commit description：as0.06-6-example06-6（实现TodoLists——实现部分todos数据对应项的勾选功能）

tag：as0.06-6

5.1.7 example06-7

实现单个删除功能

code\project\study-hooks\react-app\src\todos\index.js

import React, {
     useState, useEffect, useRef } from 'react';
import "./index.css"
import Header from "./header";
import Main from  "./main"
import Footer from "./footer";
 
function Todos(){
     
    // 用数组来保存所有TODO状态
    const [todos,setTodos] = useState([]);
 
    function addTodo(val){
     
        console.log();
        setTodos([...todos,{
     
            id: Date.now(), // 实际工作中后端提供
            val,
            completed: false // 选中状态
        }]);
    }
 
    // 修养修改的对应项id
    function changeCompleted(id,completed){
     
        todos.forEach(item=>{
     
            if(id == item.id){
     
                item.completed = completed;
            }
        });
        // 不能直接传todos，因为对比的时候是浅层对比，还是认为同一个对象，是不会进行更新的，我们应该解构出来返回一个新数组
        setTodos([...todos]);
    }
 
    function remove(id){
     
        setTodos(todos.filter(item=>item.id !== id));
    }
 
    console.log(todos);
    return (<div id="todoapp">
        <Header addTodo = {
     addTodo}/>
        <Main
            todos={
     todos}
            changeCompleted={
     changeCompleted}
            remove={
     remove}
        />
        <Footer/>
    </div>);
}
 
 
export default Todos;

code\project\study-hooks\react-app\src\todos\main.js

import React, {
     useState, useEffect, useRef } from 'react';
 
function Li(props){
     
    let {
     inner,changeCompleted,remove} = props;
    let {
     id} = inner;
    return (
        <li className={
     inner.completed ? "done" : ""}>
            <div className="view" >
                <input
                    className="toggle"
                    type="checkbox"
                    checked={
     inner.completed}
                    onChange={
     (e)=>{
     
                        changeCompleted(id,e.target.checked);
                    }}
                />
                <label>{
     inner.val}</label>
                <a className="destroy"
                   onClick={
     ()=>{
     
                       remove(id);
                   }}
                >
                </a>
            </div>
            <input
                className="edit"
                type="text"
                value={
     inner.val}
            />
        </li>
    )
}
 
function Mian(props){
     
    let {
     todos} = props;
    return (
    <section
        id="main"
        style={
     {
     
            display: todos.length > 0 ? 'block' : 'none'
        }}
    >
        <input id="toggle-all" type="checkbox" checked=""/>
        <label htmlFor="toggle-all">Mark all as complete</label>
        <ul id="todo-list">
            {
     
                todos.map(item=> {
     
                    return <Li
                        key = {
     item.id}
                        inner = {
     item}
                        {
     ...props}
                    />
                })
            }
        </ul>
    </section>
    );
}
 
 
export default Mian;

参考：https://github.com/6xiaoDi/Projec-React-hooks-enterprise-level-mbapp/tree/as0.06-7
Branch： bhStudy-Hooks

commit description：as0.06-7-example06-7（实现TodoLists——实现单个删除功能）

tag：as0.06-7

5.1.8 example06-8

实现双击选项，出现编辑框，可以修改选项内容。（需要借助生命周期和ref）

5.1.8.1 example06-8-1

实现切换编辑框

code\project\study-hooks\react-app\src\todos\main.js

import React, {
     useState, useEffect, useRef } from 'react';
const [edit,setEdit] = useState(false);
function Li(props){
     
    let {
     inner,changeCompleted,remove} = props;
    let {
     id} = inner;
    return (
        <li className={
     inner.completed ? "done" : ""}>
            <div
                className="view"
                style = {
     {
     
                    display: edit?"none":"block"
                }}
            >
                <input
                    className="toggle"
                    type="checkbox"
                    checked={
     inner.completed}
                    onChange={
     (e)=>{
     
                        changeCompleted(id,e.target.checked);
                    }}
                />
                <label
                    onDoubleClick = {
     ()=>{
     
                        setEdit(true);
                    }}
                >{
     inner.val}</label>
                <a className="destroy"
                   onClick={
     ()=>{
     
                       remove(id);
                   }}
                >
                </a>
            </div>
            <input
                className="edit"
                type="text"
                value={
     inner.val}
                style={
     {
     
                    display:edit?"block":"none"
                }}
            />
        </li>
    )
}
 
function Mian(props){
     
    let {
     todos} = props;
    return (
    <section
        id="main"
        style={
     {
     
            display: todos.length > 0 ? 'block' : 'none'
        }}
    >
        <input id="toggle-all" type="checkbox" checked=""/>
        <label htmlFor="toggle-all">Mark all as complete</label>
        <ul id="todo-list">
            {
     
                todos.map(item=> {
     
                    return <Li
                        key = {
     item.id}
                        inner = {
     item}
                        {
     ...props}
                    />
                })
            }
        </ul>
    </section>
    );
}
 
 
export default Mian;

参考：https://github.com/6xiaoDi/Projec-React-hooks-enterprise-level-mbapp/tree/as0.06-8-1
Branch： bhStudy-Hooks

commit description：as0.06-8-1-example06-8-1（实现TodoLists——实现双击选项——实现切换编辑框）

tag：as0.06-8-1

5.1.8.2 example06-8-2

失去焦点后，状态可切换回来。

code\project\study-hooks\react-app\src\todos\main.js

import React, {
     useState, useEffect, useRef } from 'react';
function Li(props){
     
    let {
     inner,changeCompleted,remove} = props;
    let {
     id} = inner;
    const [edit,setEdit] = useState(false);
    return (
        <li className={
     inner.completed ? "done" : ""}>
            <div
                className="view"
                style = {
     {
     
                    display: edit?"none":"block"
                }}
            >
                <input
                    className="toggle"
                    type="checkbox"
                    checked={
     inner.completed}
                    onChange={
     (e)=>{
     
                        changeCompleted(id,e.target.checked);
                    }}
                />
                <label
                    onDoubleClick = {
     ()=>{
     
                        setEdit(true);
                    }}
                >{
     inner.val}</label>
                <a className="destroy"
                   onClick={
     ()=>{
     
                       remove(id);
                   }}
                >
                </a>
            </div>
            <input
                className="edit"
                type="text"
                value={
     inner.val}
                style={
     {
     
                    display:edit?"block":"none"
                }}
                onBlur={
     ()=>{
     
                    setEdit(false);
                }}
            />
        </li>
    )
}
 
function Mian(props){
     
    let {
     todos} = props;
    return (
    <section
        id="main"
        style={
     {
     
            display: todos.length > 0 ? 'block' : 'none'
        }}
    >
        <input id="toggle-all" type="checkbox" checked=""/>
        <label htmlFor="toggle-all">Mark all as complete</label>
        <ul id="todo-list">
            {
     
                todos.map(item=> {
     
                    return <Li
                        key = {
     item.id}
                        inner = {
     item}
                        {
     ...props}
                    />
                })
            }
        </ul>
    </section>
    );
}
 
 
export default Mian;

问题：切换的时候没让其立即得到的焦点就导致操作其他地方就不存在失焦这个问题，它就不会切换回去了，这就出现了好几个input的编辑状态的编辑框了。

参考：https://github.com/6xiaoDi/Projec-React-hooks-enterprise-level-mbapp/tree/as0.06-8-2
Branch： bhStudy-Hooks

commit description：as0.06-8-2-example06-8-2（实现TodoLists——实现双击选项——实现切换编辑框，出现bug）

tag：as0.06-8-2

5.1.8.3 example06-8-3

通过副作用钩子解决切换的时候没让其立即得到的焦点就导致操作其他地方就不存在失焦这个问题。

通过副作用钩子使编辑框一出现，就立即选中其内容，同时焦点必然也在上面了。

code\project\study-hooks\react-app\src\todos\main.js

import React, {
     useState, useEffect, useRef } from 'react';
function Li(props){
     
    let {
     inner,changeCompleted,remove} = props;
    let {
     id} = inner;
    const [edit,setEdit] = useState(false);
    const elEdit = useRef(null);
    useEffect(()=>{
     
        if(edit){
     
            elEdit.current.select();
        }
    },[edit]);
    return (
        <li className={
     inner.completed ? "done" : ""}>
            <div
                className="view"
                style = {
     {
     
                    display: edit?"none":"block"
                }}
            >
                <input
                    className="toggle"
                    type="checkbox"
                    checked={
     inner.completed}
                    onChange={
     (e)=>{
     
                        changeCompleted(id,e.target.checked);
                    }}
                />
                <label
                    onDoubleClick = {
     ()=>{
     
                        setEdit(true);
                    }}
                >{
     inner.val}</label>
                <a className="destroy"
                   onClick={
     ()=>{
     
                       remove(id);
                   }}
                >
                </a>
            </div>
            <input
                className="edit"
                type="text"
                value={
     inner.val}
                ref={
     elEdit}
                style={
     {
     
                    display:edit?"block":"none"
                }}
                onBlur={
     ()=>{
     
                    setEdit(false);
                }}
            />
        </li>
    )
}
 
function Mian(props){
     
    let {
     todos} = props;
    return (
    <section
        id="main"
        style={
     {
     
            display: todos.length > 0 ? 'block' : 'none'
        }}
    >
        <input id="toggle-all" type="checkbox" checked=""/>
        <label htmlFor="toggle-all">Mark all as complete</label>
        <ul id="todo-list">
            {
     
                todos.map(item=> {
     
                    return <Li
                        key = {
     item.id}
                        inner = {
     item}
                        {
     ...props}
                    />
                })
            }
        </ul>
    </section>
    );
}
 
 
export default Mian;

参考：https://github.com/6xiaoDi/Projec-React-hooks-enterprise-level-mbapp/tree/as0.06-8-3
Branch： bhStudy-Hooks

commit description：as0.06-8-3-example06-8-3（实现TodoLists——实现双击选项——实现切换编辑框，解决切换出现的bug）

tag：as0.06-8-3

5.1.9 example06-9

完善切换编辑框的编辑内容

code\project\study-hooks\react-app\src\todos\index.js

import React, {
     useState, useEffect, useRef } from 'react';
import "./index.css"
import Header from "./header";
import Main from  "./main"
import Footer from "./footer";
 
function Todos(){
     
    // 用数组来保存所有TODO状态
    const [todos,setTodos] = useState([]);
 
    function addTodo(val){
     
        console.log();
        setTodos([...todos,{
     
            id: Date.now(), // 实际工作中后端提供
            val,
            completed: false // 选中状态
        }]);
    }
 
    // 修养修改的对应项id
    function changeCompleted(id,completed){
     
        todos.forEach(item=>{
     
            if(id == item.id){
     
                item.completed = completed;
            }
        });
        // 不能直接传todos，因为对比的时候是浅层对比，还是认为同一个对象，是不会进行更新的，我们应该解构出来返回一个新数组
        setTodos([...todos]);
    }
 
    function remove(id){
     
        setTodos(todos.filter(item=>item.id !== id));
    }
 
    function editVal(id,val){
     
        todos.forEach(item=>{
     
            if(id == item.id){
     
                item.val = val;
            }
        });
        setTodos([...todos]);
    }
 
    return (<div id="todoapp">
        <Header addTodo = {
     addTodo}/>
        <Main
            todos={
     todos}
            changeCompleted={
     changeCompleted}
            remove={
     remove}
            editVal={
     editVal}
        />
        <Footer/>
    </div>);
}
 
 
export default Todos;

code\project\study-hooks\react-app\src\todos\main.js

import React, {
     useState, useEffect, useRef } from 'react';
function Li(props){
     
    let {
     inner,changeCompleted,remove,editVal} = props;
    let {
     id} = inner;
    const [edit,setEdit] = useState(false);
    const elEdit = useRef(null);
    useEffect(()=>{
     
        if(edit){
     
            elEdit.current.select();
        }
    },[edit]);
    return (
        <li className={
     inner.completed ? "done" : ""}>
            <div
                className="view"
                style = {
     {
     
                    display: edit?"none":"block"
                }}
            >
                <input
                    className="toggle"
                    type="checkbox"
                    checked={
     inner.completed}
                    onChange={
     (e)=>{
     
                        changeCompleted(id,e.target.checked);
                    }}
                />
                <label
                    onDoubleClick = {
     ()=>{
     
                        setEdit(true);
                    }}
                >{
     inner.val}</label>
                <a className="destroy"
                   onClick={
     ()=>{
     
                       remove(id);
                   }}
                >
                </a>
            </div>
            <input
                className="edit"
                type="text"
                value={
     inner.val}
                ref={
     elEdit}
                style={
     {
     
                    display:edit?"block":"none"
                }}
                onBlur={
     ()=>{
     
                    setEdit(false);
                }}
                onChange={
     (e)=>{
     
                    editVal(id, e.target.value);
                }}
            />
        </li>
    )
}
 
function Mian(props){
     
    let {
     todos} = props;
    return (
    <section
        id="main"
        style={
     {
     
            display: todos.length > 0 ? 'block' : 'none'
        }}
    >
        <input id="toggle-all" type="checkbox" checked=""/>
        <label htmlFor="toggle-all">Mark all as complete</label>
        <ul id="todo-list">
            {
     
                todos.map(item=> {
     
                    return <Li
                        key = {
     item.id}
                        inner = {
     item}
                        {
     ...props}
                    />
                })
            }
        </ul>
    </section>
    );
}
 
 
export default Mian;

参考：https://github.com/6xiaoDi/Projec-React-hooks-enterprise-level-mbapp/tree/as0.06-9
Branch： bhStudy-Hooks

commit description：as0.06-9-example06-9（实现TodoLists——完善切换编辑框的编辑内容——但存在bug）

tag：as0.06-9

5.1.10 example06-10

以上问题：当编辑框内容为空，该选项还挂载页面上。

编辑为编辑框失去焦点后，在生命周期中判断如果内容为空，则不能失去焦点，必须有内容才行，即内容不得为空。

code\project\study-hooks\react-app\src\todos\main.js

import React, {
     useState, useEffect, useRef } from 'react';
function Li(props){
     
    let {
     inner,changeCompleted,remove,editVal} = props;
    let {
     id} = inner;
    const [edit,setEdit] = useState(false);
    const elEdit = useRef(null);
    useEffect(()=>{
     
        if(edit){
     
            elEdit.current.select();
        } else {
     
            // 如果为空：就不能干别的事情，焦点一直在编辑框
            if(!inner.val.trim()){
     
                setEdit(true);
            }
        }
    },[edit]);
    return (
        <li className={
     inner.completed ? "done" : ""}>
            <div
                className="view"
                style = {
     {
     
                    display: edit?"none":"block"
                }}
            >
                <input
                    className="toggle"
                    type="checkbox"
                    checked={
     inner.completed}
                    onChange={
     (e)=>{
     
                        changeCompleted(id,e.target.checked);
                    }}
                />
                <label
                    onDoubleClick = {
     ()=>{
     
                        setEdit(true);
                    }}
                >{
     inner.val}</label>
                <a className="destroy"
                   onClick={
     ()=>{
     
                       remove(id);
                   }}
                >
                </a>
            </div>
            <input
                className="edit"
                type="text"
                value={
     inner.val}
                ref={
     elEdit}
                style={
     {
     
                    display:edit?"block":"none"
                }}
                onBlur={
     ()=>{
     
                    setEdit(false);
                }}
                onChange={
     (e)=>{
     
                    editVal(id, e.target.value);
                }}
            />
        </li>
    )
}
 
function Mian(props){
     
    let {
     todos} = props;
    return (
    <section
        id="main"
        style={
     {
     
            display: todos.length > 0 ? 'block' : 'none'
        }}
    >
        <input id="toggle-all" type="checkbox" checked=""/>
        <label htmlFor="toggle-all">Mark all as complete</label>
        <ul id="todo-list">
            {
     
                todos.map(item=> {
     
                    return <Li
                        key = {
     item.id}
                        inner = {
     item}
                        {
     ...props}
                    />
                })
            }
        </ul>
    </section>
    );
}
 
 
export default Mian;

参考：https://github.com/6xiaoDi/Projec-React-hooks-enterprise-level-mbapp/tree/as0.06-10
Branch： bhStudy-Hooks

commit description：as0.06-10-example06-10（实现TodoLists——完善切换编辑框的编辑内容——解决无内容失去焦点的bug）

tag：as0.06-10

5.1.11 example06-11

添加footer框子

code\project\study-hooks\react-app\src\todos\index.js

import React, {
     useState, useEffect, useRef } from 'react';
import "./index.css"
import Header from "./header";
import Main from  "./main"
import Footer from "./footer";
 
function Todos(){
     
    // 用数组来保存所有TODO状态
    const [todos,setTodos] = useState([]);
 
    function addTodo(val){
     
        console.log();
        setTodos([...todos,{
     
            id: Date.now(), // 实际工作中后端提供
            val,
            completed: false // 选中状态
        }]);
    }
 
    // 修养修改的对应项id
    function changeCompleted(id,completed){
     
        todos.forEach(item=>{
     
            if(id === item.id){
     
                item.completed = completed;
            }
        });
        // 不能直接传todos，因为对比的时候是浅层对比，还是认为同一个对象，是不会进行更新的，我们应该解构出来返回一个新数组
        setTodos([...todos]);
    }
 
    function remove(id){
     
        setTodos(todos.filter(item=>item.id !== id));
    }
 
    function editVal(id,val){
     
        todos.forEach(item=>{
     
            if(id === item.id){
     
                item.val = val;
            }
        });
        setTodos([...todos]);
    }
 
    return (<div id="todoapp">
        <Header addTodo = {
     addTodo}/>
        <Main
            todos={
     todos}
            changeCompleted={
     changeCompleted}
            remove={
     remove}
            editVal={
     editVal}
        />
        <Footer
            todos={
     todos}
        />
    </div>);
}
 
 
export default Todos;

code\project\study-hooks\react-app\src\todos\footer.js

import React from 'react';
function Footer(props){
     
    let {
     todos} = props;
      return (
          <footer
              style={
     {
     
                  display:todos.length > 0 ? "block":"none"
              }}
          >
              <a id="clear-completed" >Clear 0 completed item</a>
              <div id="todo-count">10 items left</div>
          </footer>
      );
}
 
 
export default Footer;

参考：https://github.com/6xiaoDi/Projec-React-hooks-enterprise-level-mbapp/tree/as0.06-11
Branch： bhStudy-Hooks

commit description：as0.06-11-example06-11（实现TodoLists——添加footer框子）

tag：as0.06-11

5.1.12 example06-12

添加footer功能，其左侧显示当前未完成任务，右侧显示已完成的任务。如果没有已完成的任务，右侧就不显示。

code\project\study-hooks\react-app\src\todos\footer.js

import React from 'react';
function Footer(props){
     
    let {
     todos} = props;
    let unCompleted = todos.filter(item=>!item.completed);
    let completed = todos.filter(item=>item.completed);
      return (
          <footer
              style={
     {
     
                  display:todos.length > 0 ? "block":"none"
              }}
          >
              <a id="clear-completed"
                 style={
     {
     
                     display:completed.length > 0?"block":"none"
                 }}
              >Clear {
     completed.length} completed item</a>
              <div id="todo-count">{
     unCompleted.length} items left</div>
          </footer>
      );
}
 
 
export default Footer;

参考：https://github.com/6xiaoDi/Projec-React-hooks-enterprise-level-mbapp/tree/as0.06-12
Branch： bhStudy-Hooks

commit description：as0.06-12-example06-12（实现TodoLists——完成footer功能）

tag：as0.06-12

5.1.13 example06-13

完成clear功能：清除已完成的任务

code\project\study-hooks\react-app\src\todos\index.js

import React, {
     useState, useEffect, useRef } from 'react';
import "./index.css"
import Header from "./header";
import Main from  "./main"
import Footer from "./footer";
 
function Todos(){
     
    // 用数组来保存所有TODO状态
    const [todos,setTodos] = useState([]);
 
    function addTodo(val){
     
        console.log();
        setTodos([...todos,{
     
            id: Date.now(), // 实际工作中后端提供
            val,
            completed: false // 选中状态
        }]);
    }
 
    // 修养修改的对应项id
    function changeCompleted(id,completed){
     
        todos.forEach(item=>{
     
            if(id === item.id){
     
                item.completed = completed;
            }
        });
        // 不能直接传todos，因为对比的时候是浅层对比，还是认为同一个对象，是不会进行更新的，我们应该解构出来返回一个新数组
        setTodos([...todos]);
    }
 
    function remove(id){
     
        setTodos(todos.filter(item=>item.id !== id));
    }
 
    function removeCompleted(){
     
        setTodos(todos.filter(item=>!item.completed));
    }
 
    function editVal(id,val){
     
        todos.forEach(item=>{
     
            if(id === item.id){
     
                item.val = val;
            }
        });
        setTodos([...todos]);
    }
 
    return (<div id="todoapp">
        <Header addTodo = {
     addTodo}/>
        <Main
            todos={
     todos}
            changeCompleted={
     changeCompleted}
            remove={
     remove}
            editVal={
     editVal}
        />
        <Footer
            todos={
     todos}
            removeCompleted = {
     removeCompleted}
        />
    </div>);
}
 
 
export default Todos;

code\project\study-hooks\react-app\src\todos\footer.js

import React from 'react';
function Footer(props){
     
    let {
     todos,removeCompleted} = props;
    let unCompleted = todos.filter(item=>!item.completed);
    let completed = todos.filter(item=>item.completed);
      return (
          <footer
              style={
     {
     
                  display:todos.length > 0 ? "block":"none"
              }}
          >
              <a id="clear-completed"
                 style={
     {
     
                     display:completed.length > 0?"block":"none"
                 }}
                 onClick = {
     ()=>{
     
                     removeCompleted();
                 }}
              >Clear {
     completed.length} completed item</a>
              <div id="todo-count">{
     unCompleted.length} items left</div>
          </footer>
      );
}
 
 
export default Footer;

参考：https://github.com/6xiaoDi/Projec-React-hooks-enterprise-level-mbapp/tree/as0.06-13
Branch： bhStudy-Hooks

commit description：as0.06-13-example06-13（实现TodoLists——完成footer功能—完成clear功能）

tag：as0.06-13

5.1.14 example06-14

实现全选和全不选功能

code\project\study-hooks\react-app\src\todos\main.js

import React, {
     useState, useEffect, useRef } from 'react';
function Li(props){
     
    let {
     inner,changeCompleted,remove,editVal} = props;
    let {
     id} = inner;
    const [edit,setEdit] = useState(false);
    const elEdit = useRef(null);
    useEffect(()=>{
     
        if(edit){
     
            elEdit.current.select();
        } else {
     
            // 如果为空：就不能干别的事情，焦点一直在编辑框
            if(!inner.val.trim()){
     
                setEdit(true);
            }
        }
    },[edit]);
    return (
        <li className={
     inner.completed ? "done" : ""}>
            <div
                className="view"
                style = {
     {
     
                    display: edit?"none":"block"
                }}
            >
                <input
                    className="toggle"
                    type="checkbox"
                    checked={
     inner.completed}
                    onChange={
     (e)=>{
     
                        changeCompleted(id,e.target.checked);
                    }}
                />
                <label
                    onDoubleClick = {
     ()=>{
     
                        setEdit(true);
                    }}
                >{
     inner.val}</label>
                <a className="destroy"
                   onClick={
     ()=>{
     
                       remove(id);
                   }}
                >
                </a>
            </div>
            <input
                className="edit"
                type="text"
                value={
     inner.val}
                ref={
     elEdit}
                style={
     {
     
                    display:edit?"block":"none"
                }}
                onBlur={
     ()=>{
     
                    setEdit(false);
                }}
                onChange={
     (e)=>{
     
                    editVal(id, e.target.value);
                }}
            />
        </li>
    )
}
 
function Mian(props){
     
    let {
     todos,changeAllCompleted} = props;
    let completed = todos.filter(item=>item.completed);
    return (
    <section
        id="main"
        style={
     {
     
            display: todos.length > 0 ? 'block' : 'none'
        }}
    >
        <input
            id="toggle-all"
            type="checkbox"
            checked={
     completed.length === todos.length}
            onChange={
     (e)=>{
     
                changeAllCompleted(e.target.checked);
            }}
        />
        <label htmlFor="toggle-all">Mark all as complete</label>
        <ul id="todo-list">
            {
     
                todos.map(item=> {
     
                    return <Li
                        key = {
     item.id}
                        inner = {
     item}
                        {
     ...props}
                    />
                })
            }
        </ul>
    </section>
    );
}
 
 
export default Mian;

code\project\study-hooks\react-app\src\todos\index.js

import React, {
     useState, useEffect, useRef } from 'react';
import "./index.css"
import Header from "./header";
import Main from  "./main"
import Footer from "./footer";
 
function Todos(){
     
    // 用数组来保存所有TODO状态
    const [todos,setTodos] = useState([]);
 
    function addTodo(val){
     
        console.log();
        setTodos([...todos,{
     
            id: Date.now(), // 实际工作中后端提供
            val,
            completed: false // 选中状态
        }]);
    }
 
    // 修养修改的对应项id
    function changeCompleted(id,completed){
     
        todos.forEach(item=>{
     
            if(id === item.id){
     
                item.completed = completed;
            }
        });
        // 不能直接传todos，因为对比的时候是浅层对比，还是认为同一个对象，是不会进行更新的，我们应该解构出来返回一个新数组
        setTodos([...todos]);
    }
 
    function remove(id){
     
        setTodos(todos.filter(item=>item.id !== id));
    }
 
    function removeCompleted(){
     
        setTodos(todos.filter(item=>!item.completed));
    }
 
    function changeAllCompleted(completed){
     
        todos.forEach(item=>{
     
            item.completed = completed;
        });
        setTodos([...todos]);
    }
 
    function editVal(id,val){
     
        todos.forEach(item=>{
     
            if(id === item.id){
     
                item.val = val;
            }
        });
        setTodos([...todos]);
    }
 
    return (<div id="todoapp">
        <Header addTodo = {
     addTodo}/>
        <Main
            todos={
     todos}
            changeCompleted={
     changeCompleted}
            remove={
     remove}
            editVal={
     editVal}
            changeAllCompleted = {
     changeAllCompleted}
        />
        <Footer
            todos={
     todos}
            removeCompleted = {
     removeCompleted}
        />
    </div>);
}
 
 
export default Todos;

参考：https://github.com/6xiaoDi/Projec-React-hooks-enterprise-level-mbapp/tree/as0.06-14
Branch： bhStudy-Hooks

commit description：as0.06-14-example06-14（实现TodoLists——完成全选/全不选功能）

tag：as0.06-14

5.1.15 example06-15

可能有的浏览器会存储历史记录，我们可以手动去掉input记住功能：

code\project\study-hooks\react-app\src\todos\header.js

<input
                id="new-todo"
                type="text"
                placeholder="What needs to be done?"
                value={
     todo}
                onChange={
     (e) => {
     
                        setTodo(e.target.value);
                    }
                }
                autoComplete='off'
                onKeyDown={
     (e) => {
       // 回车事件
                    // 判断如果是回车
                    if (e.keyCode === 13){
     
                        if (!todo.trim()){
     
                            alert("输入内容不能为空！");
                            e.target.focus();
                        }else{
     
                            addTodo(todo);
                            // 清空
                            setTodo('');
                        }
                    }
                }}
            />

参考：https://github.com/6xiaoDi/Projec-React-hooks-enterprise-level-mbapp/tree/as0.06-15
Branch： bhStudy-Hooks

commit description：as0.06-15-example06-15（实现TodoLists——去掉input记住功能）

tag：as0.06-15

（后续待补充）

你可能感兴趣的:(#,React,Hooks,react,react,hooks,hooks,react,hooks快速入门,hooks,快速上手)

使用DeepSeek自动生成PPT：高效办公的终极指南点我头像干啥 Ai 人工智能信息可视化深度学习
引言在现代职场中，PPT（PowerPoint演示文稿）已经成为沟通、展示和分享想法的重要工具。然而，制作一份高质量的PPT往往需要耗费大量时间和精力，尤其是在内容整理、排版设计和样式调整方面。幸运的是，随着人工智能技术的发展，像DeepSeek这样的工具可以帮助我们自动化生成PPT，极大地提升工作效率。本文将详细介绍如何使用DeepSeek自动生成PPT，并分享一些实用技巧，帮助你快速上手。一、
从底层到实践：深度解析 Vue Composition API 与 React Hooks 的异同
一、设计哲学与底层原理差异1.1响应式系统的基因差异Vue3的CompositionAPI建立在Proxy-based响应式系统之上，通过劫持对象的getter/setter实现依赖收集。当访问响应式对象时，Vue会自动建立组件与数据的依赖关系。//Vue响应式原理简版实现functionreactive(obj){returnnewProxy(obj,{get(target,key){track
六十天前端强化训练之第十七天React Hooks 入门：useState 深度解析编程星辰海 #前端前端 react.js javascript
=====欢迎来到编程星辰海的博客讲解======看完可以给一个免费的三连吗，谢谢大佬！目录一、知识讲解1.Hooks是什么？2.useState的作用3.基本语法解析4.工作原理5.参数详解a)初始值设置方式b)更新函数特性6.注意事项7.类组件对比8.常见问题解答二、核心代码示例三、实现效果四、学习要点总结五、扩展阅读推荐官方文档优质文章推荐学习路径进阶资源六、实践步骤一、表单输入控制二、动态
深入解析React 18核心特性：构建未来级Web应用的全面指南斯~内克 react知识点前端 react.js 前端框架
一、React18的里程碑意义React18作为近年来最具革命性的版本更新，标志着前端开发正式进入并发渲染时代。这个版本不仅带来了底层架构的革新，更重新定义了现代Web应用的性能标准与开发范式。根据npm官方统计，React18发布首周下载量突破1800万次，GitHub星标数新增3.4万，充分展现了开发者社区对其技术价值的认可。二、架构革命：并发模式深度解析2.1并发渲染原理//传统同步渲染模式
打造高性能的react 大鸡腿最好吃 react.js
根本目的就是减少重复渲染使用使用shouldComponentUpdate规避冗余的更新逻辑shouldComponentUpdate触发的条件是只要父组件更新了，就会被触发，在里面判断传入的pros是否改变，不变则返回falsePureComponent+Immutable.jsPureComponent其实就是内置了对shouldComponentUpdate的实现，不过其对props的比对是
深入解析 React Diff 算法：原理、优化与实践赵大仁前端技术 js react.js 前端前端框架
深入解析ReactDiff算法：原理、优化与实践1.引言React作为前端领域的标杆框架，采用虚拟DOM（VirtualDOM）来提升UI更新性能。React的Diff算法（Reconciliation）是虚拟DOM运行机制的核心，它决定了如何高效地对比新旧DOM并执行最少的操作来更新UI。本篇文章将深入探讨ReactDiff算法的原理、优化策略，并通过生动的示例解析其工作方式，让你能够更直观地理
深入解析 React 最新特性：革新、应用与最佳实践赵大仁前端 ReactNative react.js 前端前端框架
深入解析React最新特性：革新、应用与最佳实践1.引言React作为前端开发的核心技术之一，近年来不断推出新的API和优化机制，从ConcurrentRendering（并发模式）到ServerComponents（服务器组件），都在不断提升开发体验和应用性能。本文将深入解析React最新特性，包括React18并发模式、useTransition、useDeferredValue、ReactS
小白十分钟速通 Spring Boot 基础 Gao_雪 Spring spring boot 后端 java spring vscode
SpringBoot介绍随着Spring体系的不断庞大，加上现代互联网应用体积庞大，构建一个应用还是非常困难的，Spring团队重新打造了一个新的面向微服务的框架SpringBoot。严格来说SpringBoot不能是一个框架，它更是一个方案，Spring工程的快速上手方案，它极大的降低了JavaWeb工程的创建和运行和部署的难度。在过去这些都是Java工程师的老大难，所以说SpringBoot的
Python包管理不再头疼：uv工具快速上手马岛 python uv 开发语言
Python包管理生态中存在多种工具，如pip、pip-tools、poetry、conda等，各自具备一定功能。而今天介绍的uv是Astral公司推出的一款基于Rust编写的Python包管理工具，旨在成为“Python的Cargo”。它提供了快速、可靠且易用的包管理体验，在性能、兼容性和功能上都有出色表现，为Python项目的开发和管理带来了新的选择。1.为什么用uv与其他Python中的包管
【pptx-preview】react+pptx预览起来改bug javascript react.js pptx
pptx前端预览插件pptx-preview-npm1.插件使用letpptxPreviewer:any=null;constdom:any=document.getElementById(`pptx-wrapper`);if(!dom)return;pptxPreviewer=init(dom,{width:800});fetch(url).then((response:any)=>respon
Python多版本环境管理UV 坐吃山猪 Python python uv 开发语言
Python多版本环境管理UV1-参考网址Python虚拟环境UV管理工具-官网Python虚拟环境UV管理工具-快速开始pyproject.toml使用指导2-核心知识点1）python项目维护requirements.txt2）python机器学习环境Anaconda3）python轻量级环境管理uv4）uvx快速上手使用3-上手实操1-安装UV虚拟环境管理工具UV官网安装教程#Windows
人工智能_大模型091_大模型工作流001_使用工作流的原因_处理复杂问题_多轮自我反思优化ReAct_COT思维链---人工智能工作笔记0236 添柴程序猿大模型开发&神经网络人工智能大模型工作流 COT思维链 ReAct自我反思优化大模型工作流开发
#清理环境信息，与上课内容无关importosos.environ["LANGCHAIN_PROJECT"]=""os.environ["LANGCHAIN_API_KEY"]=""os.environ["LANGCHAIN_ENDPOINT"]=""os.environ["LANGCHAIN_TRACING_V2"]=""#安装所需要使用的包!pipinstallopenailanggraphA
Spring框架快速入门手册 Uncoverlove spring mysql mybatis java 后端
说明：本文试图将Spring框架的知识体系进行整合分析，并冠以自己的理解，为初学Spring框架的同学，提供一个快速入门手册。同时呢，也是为了总结一下工作学习中遇到的问题和经验，以免发生遗漏！文末将附上Spring的学习资料，以供大家学习~（申明一下：纯小白一枚，由于工作需要自学的Spring，或许某些理解会出现偏差，烦请各位斧正！不慎感激！！）快速入门推荐阅读书籍（欢迎补充）：1、《JavaEE
前端流式输出实现详解：从原理到实践代码剑客588 前端
前端流式输出实现详解：从原理到实践前言一、流式输出核心原理1.1什么是流式输出？1.2技术优势对比1.3关键技术支撑二、原生JavaScript实现方案2.1使用FetchAPI流式处理关键点解析：2.2处理SSE（Server-SentEvents）三、主流框架实现示例3.1React实现方案3.2Vue实现方案四、高级优化策略4.1性能优化4.2用户体验增强4.3安全注意事项五、实际应用案例5
vue3+elementuiplus的table表格动态高度多喜乐长安宁 vue elementuiplus vue.js javascript 前端
table表格流体高度1、前提了解自定义指令、hooks2、核心思路通过自定义指令（newResizeObserver）监听表格变化，然后通过hooks去更新表格高度。3、核心代码src/directives/resize.ts//import{debounce}from'@/utils';import{typeDirective}from"vue";constresizeDirective:Di
kubernetes-helm详细介绍及使用冷漠程序员小哥哥 kubernetes kubernetes kuberctl docker
致读者完整入门示例请参考：Helm完整入门实战Helm本指南介绍了使用Helm来管理Kubernetes集群上的软件包的基础知识。在这之前，假定您已经安装了Helm客户端。如果您仅对运行一些快速命令感兴趣，则不妨从快速入门指南开始。本章包含了Helm命令的详细说明，并解释如何使用Helm。三大概念Chart代表着Helm包。它包含在Kubernetes集群内部运行应用程序，工具或服务所需的所有资源
React 和 Vue _使用区别开心小老虎 react知识点+组件 vue3知识点+组件前端知识点 vue.js react.js 前端
目录一、框架介绍1.Vue2.React二、框架结构1.创建应用2.框架结构三、使用区别1.单页面组成2.样式3.显示响应式数据4.响应式html标签属性5.控制元素显隐6.条件渲染7.渲染列表react和vue是目前前端比较流行的两大框架，前端程序员应该将两种框架都掌握，本文总结一些基本知识点的使用区别。一、框架介绍1.VueVue是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。
react和vue 基础使用对比圣京都 react react.js javascript vue.js
1.实现功能（ts）0.基础属性使用1.组件直接的通信2.useState动态修改值3.循环遍历功能4.实现类型vue的watch，filter，computed属性功能5.实现类似vue2的生命周期5.类型vuev-if功能的实现2.文件结构图3.具体代码interface.tsimport"./index.less";import{message}from"antd";import{useSt
【Rust指南】快速入门开发环境 hello world_rust开发是啥 2401_89213119 rust 开发语言后端
文章目录前言一、Rust语言的背景和特点1、为什么要用Rust？2、与其他编程语言相比较3、Rust特别擅长的领域4、Rust的用户和案例5、Rust的优缺点二、Rust的安装与开发工具1、安装Rust2、开发工具三、编写helloworld1、从零到一打印helloworld2、代码与运行过程分析前言本篇博客是Rust语言系列的开篇之作，以后有关Ru
2024年最新【Rust指南】快速入门开发环境 hello world_rust开发是啥(3) 2301_79772893 程序员 rust 开发语言后端
2、与其他编程语言相比较C/C++性能很好，但是系统类型和内存都不太安全。Java/C#，拥有GC机制，能保证内存安全，特性也优秀，但是性能不行Rust：安全无需GC代码安全高效，易于维护、调试3、Rust特别擅长的领域高性能WebServiceWebAssembly命令行工具网络编程嵌入式设备系统编程4、Rust的用户和案例Google：新操作系统Fuschia，其中Rust代码量约占30%Am
echarts实现3d饼图 qq_45600165 echarts 前端 javascript
import*asechartsfrom'echarts'import'echarts-gl'//import{ref}from'vue';import{onMounted,onUnmounted,toRefs,ref,reactive,watch}from'vue'exportdefault{props:{//定义prop的名称和类型data:Object},setup(props){letst
Git：Git高级特性：钩子与自定义脚本_2024-07-17_20-40-39.Tex chenjj4003 游戏开发 git elasticsearch 大数据搜索引擎 java servlet 全文检索
Git：Git高级特性：钩子与自定义脚本Git钩子简介Git钩子的基本概念Git钩子（Hooks）是Git提供的一种自动化脚本执行机制，允许你在Git的特定事件（如提交、合并、推送等）发生时运行自定义脚本。钩子脚本可以用来执行各种任务，如数据验证、环境准备、自动构建等，从而增强Git的功能，提高开发效率和代码质量。钩子的目录结构Git钩子脚本位于仓库的.git/hooks目录下。这个目录包含了多个
Java短信模块开发-腾讯云短信服务 Hbb123654 腾讯云 java
1、提前配置1、已有腾讯云账号和服务器2、开通短信服务，创建签名和模板并通过审核，如：国内短信快速入门3、需要先购买国内短信套餐包。4、在访问管理控制台>API密钥管理页面获取SecretID和SecretKey。5、安装最新版本的Maven依赖com.tencentcloudapitencentcloud-sdk-java3.1.10002、Java代码逻辑实例1、短信工具类方法/***Tenc
Web 开发的“三件套” zhangpeng455547940 Web开发 react native react.js javascript
HTML：定义内容结构。CSS：控制样式布局。JavaScript：实现动态行为和复杂逻辑。JavaScript应用场景前端开发：操作DOM、处理用户事件、实现动画等。后端开发：通过Node.js构建服务器端应用。跨平台开发：Electron（桌面应用）、ReactNative（移动端）等。
【实战ES】实战 Elasticsearch：快速上手与深度实践-附录-1-常用命令速查表-集群健康检查、索引生命周期管理、故障诊断命令言析数智实战 elasticsearch 搜索引擎大数据
点击关注不迷路点击关注不迷路点击关注不迷路附录-常用命令速查表1-Elasticsearch运维命令速查表（集群健康检查、ILM管理、故障诊断）一、集群健康检查与监控1.1集群健康状态核心命令1.2节点级健康诊断二、索引生命周期管理（ILM）2.1ILM策略配置模板2.2ILM操作命令集三、故障诊断命令大全3.1分片问题诊断流程3.2常见故障场景处理场景1：`节点离线导致分片未分配`场景2：`高内
前端面试：React hooks 调用是可以写在 if 语句里面吗？ returnShitBoy 前端 react.js javascript
在React中，Hooks是一种新的特性，允许你在函数组件中使用状态（state）和其他React特性。非常重要的一点是，ReactHooks必须遵循特定的规则，以确保组件的行为一致。ReactHooks使用规则只能在函数组件中调用Hook：你只能在React的函数组件或自定义Hooks中调用Hook，而不能在普通JavaScript函数中调用它们。不能在条件语句中调用Hook：Hooks不能放在
React篇之three渲染这个一个非常哈 react.js 前端前端框架
需求：拖拽右侧面板，里面的three模型能够自适应import{useEffect,useState,useRef}from'react'import'./App.css'import*asTHREEfrom'three';import{GLTFLoader}from'three/addons/loaders/GLTFLoader.js';import{debounce}from'lodash';
《react》前端面试题微光面试题 react.js 前端 javascript
说说你对reacthook的理解ReactHooks是React16.8版本引入的一种新的特性，它允许在不编写class的情况下使用state和其他React特性。我的理解主要集中在以下几个方面：函数组件的状态管理：Hooks提供了useState这样的钩子函数，使得我们可以在函数组件中使用状态（state），而不需要将组件转换为class组件。这简化了代码，并使组件的逻辑更易于理解和维护。副作用
对vue VS react的理解向贤前端开发 vue.js react.js 前端
对vueVSreact的理解Vue与React的核心区别在于设计哲学：Vue追求渐进式开发和开箱即用，通过模板语法、响应式系统和官方生态提供低门槛的集成方案。React强调函数式编程和纯JavaScript驱动，以JSX、单向数据流和灵活的生态构建高自由度的视图层。核心差异可总结为：响应式机制、模板vsJSX、API设计、生态策略、性能优化模式。分点论述：1.响应式机制Vue：基于数据劫持（Vue
深入理解Tomcat：Java Web服务器的安装与配置杨凯凡 JavaWeb java tomcat
大家好！今天我们来聊聊JavaWeb开发中最重要的工具之一——ApacheTomcat。Tomcat是一个开源的JavaServlet容器和Web服务器，它是运行JavaWeb应用程序的核心环境。无论是开发、测试还是部署JavaWeb应用，Tomcat都是不可或缺的工具。本文将详细介绍Tomcat的安装、配置以及常见问题的解决方法，帮助你快速上手并深入理解Tomcat的工作原理。准备好了吗？让我们
jQuery 键盘事件keydown ,keypress ,keyup介绍 107x js jquery keydown keypress keyup
本文章总结了下些关于jQuery 键盘事件keydown ,keypress ,keyup介绍，有需要了解的朋友可参考。一、首先需要知道的是： 1、keydown() keydown事件会在键盘按下时触发. 2、keyup() 代码如下复制代码 $('input').keyup(funciton(){
AngularJS中的Promise bijian1013 JavaScript AngularJS Promise
一.Promise Promise是一个接口，它用来处理的对象具有这样的特点：在未来某一时刻（主要是异步调用）会从服务端返回或者被填充属性。其核心是，promise是一个带有then()函数的对象。为了展示它的优点，下面来看一个例子，其中需要获取用户当前的配置文件： var cu
c++ 用数组实现栈类 CrazyMizzz 数据结构 C++
#include<iostream> #include<cassert> using namespace std; template<class T, int SIZE = 50> class Stack{ private: T list[SIZE];//数组存放栈的元素 int top;//栈顶位置 public: Stack(
java和c语言的雷同麦田的设计者 java 递归 scaner
软件启动时的初始化代码，加载用户信息2015年5月27号从头学java二 1、语言的三种基本结构：顺序、选择、循环。废话不多说，需要指出一下几点： a、return语句的功能除了作为函数返回值以外，还起到结束本函数的功能，return后的语句不会再继续执行。 b、for循环相比于whi
LINUX环境并发服务器的三种实现模型被触发 linux
服务器设计技术有很多，按使用的协议来分有TCP服务器和UDP服务器。按处理方式来分有循环服务器和并发服务器。 1 循环服务器与并发服务器模型在网络程序里面，一般来说都是许多客户对应一个服务器，为了处理客户的请求，对服务端的程序就提出了特殊的要求。目前最常用的服务器模型有： ·循环服务器：服务器在同一时刻只能响应一个客户端的请求 ·并发服务器：服
Oracle数据库查询指令肆无忌惮_ oracle数据库
20140920 单表查询 -- 查询************************************************************************************************************ -- 使用scott用户登录 -- 查看emp表 desc emp
ext右下角浮动窗口知了ing JavaScript ext
第一种 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/
浅谈REDIS数据库的键值设计矮蛋蛋 redis
http://www.cnblogs.com/aidandan/ 原文地址：http://www.hoterran.info/redis_kv_design 丰富的数据结构使得redis的设计非常的有趣。不像关系型数据库那样，DEV和DBA需要深度沟通，review每行sql语句，也不像memcached那样，不需要DBA的参与。redis的DBA需要熟悉数据结构，并能了解使用场景。
maven编译可执行jar包 alleni123 maven
http://stackoverflow.com/questions/574594/how-can-i-create-an-executable-jar-with-dependencies-using-maven <build> <plugins> <plugin> <artifactId>maven-asse
人力资源在现代企业中的作用百合不是茶 HR 企业管理
//人力资源在在企业中的作用人力资源为什么会存在，人力资源究竟是干什么的人力资源管理是对管理模式一次大的创新，人力资源兴起的原因有以下点：工业时代的国际化竞争，现代市场的风险管控等等。所以人力资源在现代经济竞争中的优势明显的存在，人力资源在集团类公司中存在着明显的优势(鸿海集团)，有一次笔者亲自去体验过红海集团的招聘，只知道人力资源是管理企业招聘的当时我被招聘上了，当时给我们培训的人
Linux自启动设置详解 bijian1013 linux
linux有自己一套完整的启动体系，抓住了linux启动的脉络，linux的启动过程将不再神秘。阅读之前建议先看一下附图。本文中假设inittab中设置的init tree为： /etc/rc.d/rc0.d /etc/rc.d/rc1.d /etc/rc.d/rc2.d /etc/rc.d/rc3.d /etc/rc.d/rc4.d /etc/rc.d/rc5.d /etc
Spring Aop Schema实现 bijian1013 java spring AOP
本例使用的是Spring2.5 1.Aop配置文件spring-aop.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmln
【Gson七】Gson预定义类型适配器 bit1129 gson
Gson提供了丰富的预定义类型适配器，在对象和JSON串之间进行序列化和反序列化时，指定对象和字符串之间的转换方式， DateTypeAdapter public final class DateTypeAdapter extends TypeAdapter<Date> { public static final TypeAdapterFacto
【Spark八十八】Spark Streaming累加器操作（updateStateByKey) bit1129 update
在实时计算的实际应用中，有时除了需要关心一个时间间隔内的数据，有时还可能会对整个实时计算的所有时间间隔内产生的相关数据进行统计。比如：对Nginx的access.log实时监控请求404时，有时除了需要统计某个时间间隔内出现的次数，有时还需要统计一整天出现了多少次404，也就是说404监控横跨多个时间间隔。 Spark Streaming的解决方案是累加器，工作原理是，定义
linux系统下通过shell脚本快速找到哪个进程在写文件 ronin47
一个文件正在被进程写我想查看这个进程文件一直在增大找不到谁在写使用lsof也没找到这个问题挺有普遍性的，解决方法应该很多，这里我给大家提个比较直观的方法。 linux下每个文件都会在某个块设备上存放，当然也都有相应的inode, 那么透过vfs.write我们就可以知道谁在不停的写入特定的设备上的inode。幸运的是systemtap的安装包里带了inodewatch.stp，位
java-两种方法求第一个最长的可重复子串 bylijinnan java 算法
import java.util.Arrays; import java.util.Collections; import java.util.List; public class MaxPrefix { public static void main(String[] args) { String str="abbdabcdabcx";
Netty源码学习-ServerBootstrap启动及事件处理过程 bylijinnan java netty
Netty是采用了Reactor模式的多线程版本，建议先看下面这篇文章了解一下Reactor模式： http://bylijinnan.iteye.com/blog/1992325 Netty的启动及事件处理的流程，基本上是按照上面这篇文章来走的文章里面提到的操作，每一步都能在Netty里面找到对应的代码其中Reactor里面的Acceptor就对应Netty的ServerBo
servelt filter listener 的生命周期 cngolon filter listener servelt 生命周期
1. servlet 当第一次请求一个servlet资源时，servlet容器创建这个servlet实例，并调用他的 init(ServletConfig config)做一些初始化的工作，然后调用它的service方法处理请求。当第二次请求这个servlet资源时，servlet容器就不在创建实例，而是直接调用它的service方法处理请求，也就是说
jmpopups获取input元素值 ctrain JavaScript
jmpopups 获取弹出层form表单首先，我有一个div，里面包含了一个表单，默认是隐藏的，使用jmpopups时，会弹出这个隐藏的div，其实jmpopups是将我们的代码生成一份拷贝。当我直接获取这个form表单中的文本框时，使用方法：$('#form input[name=test1]').val()；这样是获取不到的。我们必须到jmpopups生成的代码中去查找这个值，$(
vi查找替换命令详解 daizj linux 正则表达式替换查找 vim
一、查找查找命令 /pattern<Enter> ：向下查找pattern匹配字符串 ?pattern<Enter>：向上查找pattern匹配字符串使用了查找命令之后，使用如下两个键快速查找： n：按照同一方向继续查找 N：按照反方向查找字符串匹配 pattern是需要匹配的字符串，例如： 1: /abc<En
对网站中的js,css文件进行打包 dcj3sjt126com PHP 打包
一，为什么要用smarty进行打包 apache中也有给js,css这样的静态文件进行打包压缩的模块，但是本文所说的不是以这种方式进行的打包，而是和smarty结合的方式来把网站中的js,css文件进行打包。为什么要进行打包呢，主要目的是为了合理的管理自己的代码。现在有好多网站，你查看一下网站的源码的话，你会发现网站的头部有大量的JS文件和CSS文件，网站的尾部也有可能有大量的J
php Yii: 出现undefined offset 或者 undefined index解决方案 dcj3sjt126com undefined
在开发Yii 时，在程序中定义了如下方式： if($this->menuoption[2] === 'test')，那么在运行程序时会报：undefined offset:2，这样的错误主要是由于php.ini 里的错误等级太高了，在windows下错误等级
linux 文件格式（1） sed工具 eksliang linux linux sed工具 sed工具 linux sed详解
转载请出自出处： http://eksliang.iteye.com/blog/2106082 简介 sed 是一种在线编辑器，它一次处理一行内容。处理时，把当前处理的行存储在临时缓冲区中，称为“模式空间”（pattern space），接着用sed命令处理缓冲区中的内容，处理完成后，把缓冲区的内容送往屏幕。接着处理下一行，这样不断重复，直到文件末尾
Android应用程序获取系统权限 gqdy365 android
引用如何使Android应用程序获取系统权限第一个方法简单点，不过需要在Android系统源码的环境下用make来编译： 1. 在应用程序的AndroidManifest.xml中的manifest节点
HoverTree开发日志之验证码 hvt .net C#asp.net hovertree webform
HoverTree是一个ASP.NET的开源CMS，目前包含文章系统，图库和留言板功能。代码完全开放，文章内容页生成了静态的HTM页面，留言板提供留言审核功能，文章可以发布HTML源代码，图片上传同时生成高品质缩略图。推出之后得到许多网友的支持，再此表示感谢！留言板不断收到许多有益留言，但同时也有不少广告，因此决定在提交留言页面增加验证码功能。ASP.NET验证码在网上找，如果不是很多，就是特别多
JSON API：用 JSON 构建 API 的标准指南中文版 justjavac json
译文地址：https://github.com/justjavac/json-api-zh_CN 如果你和你的团队曾经争论过使用什么方式构建合理 JSON 响应格式，那么 JSON API 就是你的 anti-bikeshedding 武器。通过遵循共同的约定，可以提高开发效率，利用更普遍的工具，可以是你更加专注于开发重点：你的程序。基于 JSON API 的客户端还能够充分利用缓存，
数据结构随记_2 lx.asymmetric 数据结构笔记
第三章栈与队列一．简答题 1. 在一个循环队列中，队首指针指向队首元素的前一个位置。 2.在具有n个单元的循环队列中，队满时共有 n-1 个元素。 3. 向栈中压入元素的操作是先移动栈顶指针&n
Linux下的监控工具dstat 网络接口 linux
1) 工具说明dstat是一个用来替换 vmstat,iostat netstat,nfsstat和ifstat这些命令的工具, 是一个全能系统信息统计工具. 与sysstat相比, dstat拥有一个彩色的界面, 在手动观察性能状况时, 数据比较显眼容易观察; 而且dstat支持即时刷新, 譬如输入dstat 3, 即每三秒收集一次, 但最新的数据都会每秒刷新显示. 和sysstat相同的是,
C 语言初级入门--二维数组和指针 1140566087 二维数组 c/c++指针
/* 二维数组的定义和二维数组元素的引用二维数组的定义：当数组中的每个元素带有两个下标时，称这样的数组为二维数组； (逻辑上把数组看成一个具有行和列的表格或一个矩阵); 语法：类型名数组名[常量表达式1][常量表达式2] 二维数组的引用：引用二维数组元素时必须带有两个下标，引用形式如下：例如： int a[3][4]; 引用：
10点睛Spring4.1-Application Event wiselyman application
10.1 Application Event Spring使用Application Event给bean之间的消息通讯提供了手段应按照如下部分实现bean之间的消息通讯继承ApplicationEvent类实现自己的事件实现继承ApplicationListener接口实现监听事件使用ApplicationContext发布消息