shbi131xx

尚硅谷-React

—配合尚硅谷视频—

1.React初认识

（1）React是什么
react是用于构建用户界面（视图）的JavaScript库
也可以说react是一个将数据渲染为html视图开端的开源JS库

（2）React的功能是什么
操作Dom呈现页面

（3）为什么学React：原生JS的痛点
1 原生js操作dom效率低，繁琐

document.getElamentById('name')

2 使用js直接操作dom，浏览器会进行大量的重汇重排
3.原生js没有组件化的编码方案，代码复用率低
组件化：html、css、js都拆

（4）React的特点
1.采用组件化的模式，声明式编码，提高开发效率及组件的复用率
2.在React Native中可以使用React语法进行移动端开发
3.使用虚拟DOM+优秀的Diffing算法，尽量少的与真实的DOM的交互

2 React入门-HelloReact

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    
    <div id="test">div>
    
    <script type="text/javascript" src="../js/react.development.js">script>
    
    <script type="text/javascript" src="../js/react-dom.development.js">script>
    
    <script type="text/javascript" src="../js/babel.min.js">script>

    
    <script type="text/babel">
        //1.创建虚拟dom
        const Vdom=<h1>hello-react</h1>
        //2.渲染虚拟dom到页面 ReactDom.render(虚拟DOM,容器)
        ReactDOM.render(Vdom,document.getElementById('test'))
    script>
body>
html>

3 为什么用jsx？对比虚拟dom的两种创建方式

//创建内容展示：
<h1 id="title">
      <span id="thespan">hello-reactspan>
h1>

（1）使用jsx创建虚拟dom

    <script type="text/babel">
        //1.创建虚拟dom
        const Vdom=<h1 id="title"><span id="thespan">hello-react</span></h1>
        //2.渲染虚拟dom到页面 ReactDom.render(虚拟DOM,容器)
        ReactDOM.render(Vdom,document.getElementById('test'))
    script>

（2）使用js创建虚拟dom
api：React.createElement(标签名,标签属性,标签内容)：用于创建虚拟dom

    <script type="text/javascript">
        // 创建虚拟dom React.createElement(标签名,标签属性,标签内容)
        const Vdom=React.createElement('h1',{id:'title'},React.createElement('span',{id:'thespan'},'hello-react'))
        //2.渲染虚拟dom到页面 ReactDom.render(虚拟DOM,容器)
        ReactDOM.render(Vdom,document.getElementById('test'))
    script>

（3）结论
jsx是js在react方面的语法糖

4.什么是虚拟dom

它其实是一个Object对象

关于虚拟dom

虚拟dom本质是object类型的对象
虚拟dom相比于真实dom“轻”（虚拟dom的属性较少），因为虚拟dom是react内部在用，所以无需真实dom那么多的属性
虚拟dom最终会被react转化为真实dom，呈现在页面中

<script type="text/babel">
        //1.创建虚拟dom
        const Vdom=<h1><span>hello-react</span></h1>
        //2.渲染虚拟dom到页面 ReactDom.render(虚拟DOM,容器)
        ReactDOM.render(Vdom,document.getElementById('test'))
        //创建真实际dom
        const Tdom=document.getElementById('test')
        console.log('虚拟dom',Vdom)
        console.log('真实dom',Tdom)
script>

5.JSX的语法规则

5.1 关于JSX

jsx全称JavaScript XML
是react定义的一种类似于XML的JS扩展语法JS+XML
作用是用来简化创建虚拟DOM
标签名任意：HTML标签或者其他标签

XML 早期用于存储和传输数据
< student >
< name> 18< /name >

5.2 JSX语法规则

定义虚拟dom的时候不要写引号
标签中混入JS表达式时要用{ }

注意区分：js表达式和js语句

表达式：表达式产生一个值可以放在任何一个需要值的地方。
例如：a，a+b，add(1)，arr.map()，function(){}

语句：例如：if(){}，for(){}，switch(){}

    <script type="text/babel">
        const myId="guigu"
        const myName="lihua"
        //1.创建虚拟dom
        const Vdom2=(
            <h2 id="{myId}">
                <span>{myName}</span>
            </h2>
        )
        //2.渲染虚拟dom到页面 ReactDom.render(虚拟DOM,容器)
        ReactDOM.render(Vdom2,document.getElementById('test'))
    </script>

样式的类名不要用class，要用className

        const Vdom2=(
            <h2 id="{myId}" className="title">
                <span>{myName}</span>
            </h2>
        )

内联样式要用 style={{key:'value’,key2:‘value2’}} 的形式来写

        const Vdom2=(
            <h2 id="{myId}" className="title">
                <span style={{color:'white',fontSize:'40px'}}>{myName}</span>
            </h2>
        )

虚拟dom必须只有一个根标签
标签必须闭合

     <input type="text"/> 
     <input type="text"></input>

标签首字母：
（1）若小写字母开头，标签转化为html中同名标签，如果html找不到此标签-----报错
（2）若大写字母开头，React就去渲染对应的组件，若组件没有定义-----报错
render中写注释的格式：

 {/*{this.input1=currentNode;console.log(currentNode)}}/> */}

6 React中的数据循环遍历

    <script type="text/babel">
        // 模拟数据
        const title="前端框架列表"
        const data=['angular','vue','react']
        //1.创建虚拟dom
        const Vdom=(
            <div>
                <h2>{title}</h2>
                <ul>
                    {
                        data.map((item,index)=>{
                            return <li key={index}>{item}</li>
                        })
                    }
                </ul>
            </div>
        )
        //2.渲染虚拟dom到页面 ReactDom.render(虚拟DOM,容器)
        ReactDOM.render(Vdom,document.getElementById('test'))

7 模块与组件、模块化与组件化的理解

（1）模块：

理解：向外提供特定功能的js程序，一般就是一个js文件。
为什么要拆分成模块：随着业务逻辑的增加，代码越来越复杂
作用：复用js，简化js的编写，提高js运行效率
模块化：当应用的js都以模块来编写，这个应用就是一个模块化的应用

（2）组件：

理解：用来实现局部功能效果的代码和资源的集合包括js、html、css等
为什么：一个界面的功能复杂
作用：复用编码，简化项目代码的编写，提高项目运行效率
组件化：当应用是以多组件的方式实现，这个应用就是一个组件化的应用

8 React组件

8.1 分类

名称	描述
函数式组件	用函数定义的组件，适用于简单组件的定义
类式组件	用类定义的组件，适用于复杂组件的定义

8.2 函数式组件

    <script type="text/babel">
        //1.创建函数式组件
        function Demo(){
            //此处的this是undefined 因为bable翻译后开启了严格模式
            return <h2>我是函数定义的简单组件，适用于简单组件的定义</h2>
        }
        //2.渲染组件到页面 ReactDom.render(虚拟DOM,容器)
        ReactDOM.render(<Demo/>,document.getElementById('test'))
    </script>

执行ReactDOM.render( 1.react解析了组件标签，找到了Demo组件
2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟dom转化为真实dom
3.将dom呈现在页面中。

8.3 类式组件

    <script type="text/babel">
        //1.创建类式组件 必须继承react中内置的类 React.Component
        class MyComponent extends React.Component{
            render(){
                return <h2>我是定义的类式组件</h2>
            }
        }
        //2.渲染组件到页面 ReactDom.render(虚拟DOM,容器)
        ReactDOM.render(<MyComponent/>,document.getElementById('test'))
    </script>

ReactDOM.render(< MyComponent/>,document.getElementById(‘xxxx’))之后发生了什么？
1.MyComponent解析了组件标签，找到了MyComponent组件
2.发现组件是类定义的，随后new出来该类的实例，并通过该实例调用到原型上的rander方法
3.将rander返回的虚拟dom转化为真实dom
4.将dom渲染在页面中

9 组件三大属性之---- state

名称	描述
简单组件	没有state的
复杂组件	有state的

（1）实例

script type="text/babel">
        class Weather extends React.Component{
            constructor(props){
                super(props) 
                // 初始化状态
                this.state={isHot:true}
                // 将原型对象上的方法转为实例自身上的方法
                this.changeWeather=this.changeWeather.bind(this)
            }
            changeWeather(){
                //1.类中的方法默认开启严格模式
                //2. 由于changeWeather是作为onclick事件的回调 不是通过实例调用的而是直接调用
                //结论：changeWeather中的this是undefined

                // 严重注意：状态不可直接跟改 要使用内置的api
                this.setState({isHot:!this.state.isHot})
            }
            render(){
                return <h2 id='title' onClick={this.changeWeather}>今天天气很{this.state.isHot?'炎热':'凉爽'}</h2>
            }
        }
        ReactDOM.render(<Weather/>,document.getElementById('test'))
    </script>

（2）使用this.setState更新state

这里的更新是一种合并不会影响其他属性，而不是覆盖

this.setState({isHot:!this.state.isHot})

（3）state的简写方式
主要运用原理：类中可以直接写赋值语句，含义是给car的实例对象添加一个属性。

    <script type="text/babel">
        class Weather extends React.Component{
            constructor(props){
                super(props)
            }
            // 类中可以直接写赋值语句 含义是给类的实例添加一个属性
            state={isHot:true}
            changeWeather=()=>{
                this.setState({isHot:!this.state.isHot})
            }
            render(){
                return <h2 id='title' onClick={this.changeWeather}>今天天气很{this.state.isHot?'炎热':'凉爽'}</h2>
            }
        }
        ReactDOM.render(<Weather/>,document.getElementById('test'))
    </script>

（4）总结state

组件中rander方法中的this为组件的实例对象
组件自定义的方法中this为undefined，如何解决？
（1）使用bind强制改变指向
（2）使用箭头函数
状态数据不能直接修改，要用this.setState({})

10 组件三大属性之-----prop

（1）基本用法

    <script type="text/babel">
        class Person extends React.Component{
            constructor(props){
                super(props)
            }
            render(){
                console.log(this)
                return(
                <ul>
                  <li>姓名{this.props.name}</li>
                  <li>年龄{this.props.age}</li>    
                  <li>性别{this.props.sex}</li>        
                </ul>
                ) 
            }
        }
        ReactDOM.render(<Person name="tom" age="18" sex="man"/>,document.getElementById('test'))
    </script>

（2）对标签属性进行限制和设置默认值

    <!-- 引入prop-types用于对组件标签属性进行限制 -->
    <script type="text/javascript" src="../js/prop-types.js"></script>

    <script type="text/babel">
        class Person extends React.Component{
            constructor(props){
                super(props)
            }
            render(){
                const {name,age,sex} = this.props
                return(
                <ul>
                  <li>姓名{name}</li>
                  <li>年龄{age}</li>    
                  <li>性别{sex}</li>        
                </ul>
                ) 
            }
        }
        // 指定参数类型
        Person.propTypes={
            name:PropTypes.string.isRequired,
            sex:PropTypes.string,
            age:PropTypes.number,
            fun:PropTypes.func,
        }
        // 指定默认值
        Person.defaultProps={
            sex:'男',
            age:18
        }
        const p={name:'tom',age:"18",sex:'man'}
        ReactDOM.render(<Person {...p}/>,document.getElementById('test'))
        //会出现报错信息：Warning: Failed prop type: Invalid prop `age` of type `string` supplied to `Person`, expected `number`.in Person

（3）props值是只读的

            render(){
                this.props.age=19 //报错
                const {name,age,sex} = this.props
                return(
                <ul>
                  <li>姓名{name}</li>
                  <li>年龄{age}</li>    
                  <li>性别{sex}</li>        
                </ul>
                ) 
            }

（4）props简写形式
将propTypes和defaultProps放在类定义的内部

    <script type="text/babel">
        // 创建组件
        class Person extends React.Component{
            // 指定类型
            static propTypes={
               name:PropTypes.string.isRequired,
               sex:PropTypes.string,
               age:PropTypes.number,
               fun:PropTypes.func,
            }
            // 设置默认值
            static defaultProps={
               sex:'男',
               age:18
            }
            state={secname:'lihua'}
            render(){
                const {name,age,sex} = this.props
                return(
                <ul>
                  <li>姓名{name}</li>
                  <li>年龄{age}</li>    
                  <li>性别{sex}</li>
                  <li>state:{this.state.secname}</li>     
                </ul>
                ) 
            }
        }
        const p={name:'tom',age:18,sex:'man'}
        ReactDOM.render(<Person {...p}/>,document.getElementById('test'))
    </script>

（5）函数式组件中使用props

    <script type="text/babel">
        //1.创建函数式组件
        function MyComponent(props){
            return <h2 className='title'>我是{props.name}</h2>
        }
        //2.渲染组件到页面 ReactDom.render(虚拟DOM,容器)
        const p={name:'tom',age:18,sex:'man'}
        ReactDOM.render(<MyComponent {...p}/>,document.getElementById('test'))
    </script>

11 类中的构造器

类中的构造器是否接收props，是否传递给super取决于：是否希望在构造器中通过this访问props
构造器可以直接删除

constructor(props){
     super(props)
}

12 组件的三大属性-----ref

（1）字符串形式的ref
不推荐
因为string类型的ref存在效率的问题。

    <script type="text/babel">
        //创建组件
        class Demo extends React.Component{
            //展示输入框的数据
            showData = ()=>{
                alert(this.refs.input1.value)
            }
            showData2 = ()=>{
                alert(this.refs.input2.value)
            }
            render(){
                return (
                    <div>
                        <input type="text" placeholder="点击按钮提示数据"  ref="input1"/>&nbsp;
                        <button onClick={this.showData}>点我提示左侧数据</button>&nbsp;
                        <input type="text" placeholder="失去焦点提示数据" onBlur={this.showData2} ref="input2"/>&nbsp;
                    </div>
                )
            }
        }
        //渲染组件到页面
        ReactDOM.render(<Demo/>,document.getElementById('test'))
    </script>

（2）回调函数形式的ref

    <script type="text/babel">
        //创建组件
        class Demo extends React.Component{
            //展示输入框的数据
            showData = ()=>{
                alert(this.input1.value)
            }
            showData2 = ()=>{
                alert(this.input2.value)
            }
            render(){
                return (
                    <div>
                        <input type="text" placeholder="点击按钮提示数据"  ref={currentNode=>this.input1=currentNode}/>&nbsp;
                        <button onClick={this.showData}>点我提示左侧数据</button>&nbsp;
                        <input type="text" placeholder="失去焦点提示数据" onBlur={this.showData2}  ref={currentNode=>this.input2=currentNode}/>&nbsp;
                    </div>
                )
            }
        }
        //渲染组件到页面
        ReactDOM.render(<Demo/>,document.getElementById('test'))
    </script>

（3）createRef API形式的ref

React.createRef：调用后可以返回一个容器，该容器可以存储被Ref所标识的节点
该容器是专人专用的

    <script type="text/babel">
        //创建组件
        class Demo extends React.Component{
            input1 = React.createRef()
            input2 = React.createRef()
            showData = ()=>{
                alert(this.input1.current.value)
            }
            showData2 = ()=>{
                alert(this.input2.current.value)
            }
            render(){
                return (
                    <div>
                        <input type="text" placeholder="点击按钮提示数据"  ref={this.input1 }/>&nbsp;
                        <input type="text" placeholder="点击按钮提示数据"  ref={this.input2 }/>&nbsp;
                        <button onClick={this.showData}>点我提示左侧数据</button>&nbsp;
                        <button onClick={this.showData2}>点我提示左侧数据</button>&nbsp;
                    </div>
                )
            }
        }
        //渲染组件到页面
        ReactDOM.render(<Demo/>,document.getElementById('test'))
    </script>

13 React中的事件处理

1.通过onXxx属性指定事件处理函数（注意大小写）
（1）React使用的是自定义事件，而不是原生dom事件------为了更好的兼容性
（2）React中的事件是通过事件委托方式处理的（委托给组件最外层的元素----------为了高效
2. 通过event.target得到发生事件的dom元素
3.不要过度的使用ref

    <script type="text/babel">
        //创建组件
        class Demo extends React.Component{
            showData2 = (event)=>{
                alert(event.target.value)
            }
            render(){
                return (
                    <div>
                        <input type="text" placeholder="失去焦点提示数据"   onBlur={this.showData2}/>
                    </div>
                )
            }
        }
        //渲染组件到页面
        ReactDOM.render(<Demo/>,document.getElementById('test'))
    </script>

14 React中的收集表单数据

14.1 非受控组件

页面中输入类的dom 是现用现取的状态就是非受控组件

    <script type="text/babel">
        //创建组件
        class Login extends React.Component{
            handleSubmit=(event)=>{
                event.preventDefault()//阻止默认事件
                let {username,password} = this
                alert(`你输入的用户名是${username.value},你输入的密码是${password.value}`)
            }
            render(){
                return(
                    <form action="" onSubmit={this.handleSubmit}>
                        用户名：<input type="text"  id="" placeholder="请输入用户名" name="username" ref={c=>this.username=c}/>
                        密码：<input type="password"  id="" placeholder="请输入密码" name="password" ref={c=>this.password=c}/>
                        <button>登录</button>
                    </form>
                )
            }
        }
        //渲染组件到页面
        ReactDOM.render(<Login/>,document.getElementById('test'))
    </script>

14.2 受控组件

受控组件：页面中所有输入类的dom随着输入，输入的值被维护在状态【state】中。

    <script type="text/babel">
        //创建组件
        class Login extends React.Component{
            state={username:'',password:''}
            // 提交
            handleSubmit=(event)=>{
                event.preventDefault()//阻止默认事件
                alert(`你输入的用户名是${this.state.username},你输入的密码是${this.state.password}`)
            }
            // 保存用户名在状态中
            saveUsername=(event)=>{
               this.setState({username:event.target.value})
            }
            // 保存密码在状态中
            savePassword=(event)=>{
               this.setState({password:event.target.value})
            }
            render(){
                return(
                    <form action="" onSubmit={this.handleSubmit}>
                        用户名：<input type="text"  id="" placeholder="请输入用户名" name="username" onChange={this.saveUsername}/>
                        密码：<input type="password"  id="" placeholder="请输入密码" name="password" onChange={this.savePassword}/>
                        <button>登录</button>
                    </form>
                )
            }
        }
        //渲染组件到页面
        ReactDOM.render(<Login/>,document.getElementById('test'))
    </script>

15 高阶函数，函数的柯里化

高阶函数： 如果一个函数符合下面两个规范中的任何一个，那这个函数就是高阶函数。
（1）若a函数，接收的参数是一个函数，那么a函数就可以称为高阶函数
（2）若a函数调用的返回值为一个函数，那么a就可以称为高阶函数
常见的高阶函数 promise、setTimeOut、arr.map…
函数柯里化： 通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式

        function add(a){
            return (b)=>{
                return (c)=>{
                    return a+b+c
                }
            }
        }
        let a = add(1)(2)(3)
        console.log(a)

    <script type="text/babel">
        //创建组件
        class Login extends React.Component{
            state={username:'',password:''}
            // 提交
            handleSubmit=(event)=>{
                event.preventDefault()//阻止默认事件
                alert(`你输入的用户名是${this.state.username},你输入的密码是${this.state.password}`)
            }
            // 保存表单数据到状态中
            saveFomeData=(type)=>{
                return (event)=>{
                    // 使用[]来获取变量 因为直接写type会把type当做字符串而不是变量
                    this.setState({[type]:event.target.value})
                }
            }
            render(){
                return(
                    <form action="" onSubmit={this.handleSubmit}>
                        用户名：<input type="text"  id="" placeholder="请输入用户名" name="username" onChange={this.saveFomeData('username')}/>
                        密码：<input type="password"  id="" placeholder="请输入密码" name="password" onChange={this.saveFomeData('password')}/>
                        <button>登录</button>
                    </form>
                )
            }
        }
        //渲染组件到页面
        ReactDOM.render(<Login/>,document.getElementById('test'))
    </script>

 saveUserinfo=(type)=>{
      return (event)=>{
          this.setState({[type]:event.target.value})
      }
}
注意：这里为什么是return这个函数 
是因为调用的时候onChange={this.saveFomeData('password')}的涵义是
将this.saveFomeData('password')的返回值作为onChange的回调。

注意：这里的[type]:event.target.value属性名要用[]来包裹（用于读取变量），否则会被视为普通字符串。

不用柯里化

onChange={(event)=>this.saveFomeData(‘username’,event)}
onchange需要函数作为回调，就利用箭头函数来传递一个函数作为回调。

  <script type="text/babel">
        //创建组件
        class Login extends React.Component{
            state={username:'',password:''}
            // 提交
            handleSubmit=(event)=>{
                event.preventDefault()//阻止默认事件
                alert(`你输入的用户名是${this.state.username},你输入的密码是${this.state.password}`)
            }
            // 保存表单数据到状态中
            saveFomeData=(type,event)=>{
                this.setState({[type]:event.target.value})
            }
            render(){
                return(
                    <form action="" onSubmit={this.handleSubmit}>
                        用户名：<input type="text"  id="" placeholder="请输入用户名" name="username" onChange={(event)=>this.saveFomeData('username',event)}/>
                        密码：<input type="password"  id="" placeholder="请输入密码" name="password" onChange={(event)=>this.saveFomeData('password',event)}/>
                        <button>登录</button>
                    </form>
                )
            }
        }
        //渲染组件到页面
        ReactDOM.render(<Login/>,document.getElementById('test'))
    </script>

16 React的生命周期

（2）React生命周期（旧版本）

（2）React生命周期（新版本）

（16-1）：componentDidMount

调动时机：组件挂载完毕时调用,一般用于做一些初始化的事情。（开启定时器，发送网络请求、订阅消息）

    <script type="text/babel">
        //创建组件
        class Life extends React.Component{
            state={opacity:1}
           //使组件从页面移除
           distory=()=>{
               ReactDOM.unmountComponentAtNode(document.getElementById('test'))
           }
           // 调动时机：组件挂载完毕时调用
           componentDidMount(){
                setInterval(()=>{
                   let {opacity} = this.state
                   opacity -= 0.1
                   if(opacity <= 0) opacity=1
                   this.setState({opacity})
               },200)
           }
           render(){
               return(
                   <div>
                      <h2 style={{opacity:this.state.opacity}}>ReactReactReactReact</h2>
                      <button onClick={this.distory}>消失</button>
                    </div>
               )
           }
        }
        //渲染组件到页面
        ReactDOM.render(<Life/>,document.getElementById('test'))
    </script>

（16-2）：componentWillUnmount

调用时机：组件将要被卸载时调用，一般做一些收尾的事（关闭定时器、取消订阅消息）

卸载组件：this.distory

    <script type="text/babel">
        //创建组件
        class Life extends React.Component{
            state={opacity:1}
           //使组件从页面移除
           distory=()=>{
               ReactDOM.unmountComponentAtNode(document.getElementById('test'))
           }
           // 调用时机：组件将要被卸载时调用
           componentWillUnmount(){
            clearInterval(this.timer)
           }
           render(){
               return(
                   <div>
                      <h2 style={{opacity:this.state.opacity}}>ReactReactReactReact</h2>
                      <button onClick={this.distory}>消失</button>
                    </div>
               )
           }
        }
        //渲染组件到页面
        ReactDOM.render(<Life/>,document.getElementById('test'))

（16-3）：新版本和旧版本的区别

1.新版本中要用

UNSAFE_componentWillReceiveProps
UNSAFE_componentWillMount
UNSAFE_componentWillUpdate

2 新版本出现两个新的钩子函数
使用的情况比较少

getDerivedStateFromProps
getSnapshotBeforeUpdate

getDerivedStateFromProps：从props中得到一个派生的状态，若state中的值在任何时候都取决于props中时使用【一般不使用】

// getDerivedStateFromProps
//返回值为一个对象：state中的同名值被props替代且不能被修改
//返回值为null：没有影响
//返回值为props：state中的同名值被props替代且不能被修改
static getDerivedStateFromProps(props,state){
      console.log('Count-getDerivedStateFromProps',props,state)
      return props
}

getSnapshotBeforeUpdate：在更新之前获取快照【不常用】

//getSnapshotBeforeUpdate
getSnapshotBeforeUpdate(){
   console.log('Count-getSnapshotBeforeUpdate')
    return 'weijiamin'//会被componentDidUpdate接收
}

17 React脚手架

步骤
1全局安装: npm install -g create-react-app/npm i create-react-app -g
2.切换到想创建项目的目录，使用命令：create-react-app hello-react
3.进入项目文件夹：cd hello-react
4 启动项目：npm start
5ts+react ：create react-app xxx --template typescript

快捷键
rcc：快速生成React类式组件框架
rfc：快速生成React函数式组件

18 父子组件传值

1.父-子
父组件

export default class App extends Component {
  state = {
    todos: [
      { id: "001", name: "吃饭" ,done:true},
      { id: "002", name: "睡觉" ,done:false},
      { id: "003", name: "上班" ,done:false},
      { id: "004", name: "打游戏" ,done:false},
    ],
  };
  render() {
    return (
        <List todos={this.state.todos} />
    );
  }
}

子组件

export default class List extends Component {
  render() {
    return (
      <ul className="todo-main">
        {
          this.props.todos.map((item,index)=>{
            return <Item key={item.id} todo={item}/>
          })
        }
      </ul>
    );
  }
}

2.子-父：实际是方法的传递
父组件

export default class App extends Component {
  a=(data)=>{
    console.log('父组件接收到的值',data)
  }
  render() {
    return (
          <Header a={this.a}/>
    );
  }
}

子组件

export default class Header extends Component {
  handleKeyUp=(event)=>{
    this.props.a(event.target.value)
  }
  render() {
    return (
        <input type="text" placeholder="请输入你的任务名称，按回车键确认"  onKeyUp={this.handleKeyUp}/>
    );
  }
}

注意：当子组件调用的父组件的函数中使用到了this相关的数据的时候，绑定方法要手动指定this指向否则this会默认指向当前组件

父组件：
export default class TestA extends Component {
    state={
        list:['1','2','3'],
    }
    changeItem(index){
        console.log(index,this.state)
        let list = this.state.list
        list[index] = '你好'
        this.setState({list:list})
    }
    render() {
        const _this = this
        return (
        <div>
            {this.state.list.map((item,index)=>{
                return <div key={index} className='list-item' onClick={()=>{this.changeItem(index)}}>{item}</div>
            })}
            <div>这里调用子组件</div>
            <TestB list={this.state.list} changeItem={_this.changeItem.bind(this)}></TestB>
        </div>
        )
    }
}

子组件：
export default class TestB extends Component {
  changeItemByParent(index){
    this.props.changeItem(index)
  }
  render() {
    return (
      <div>
        {this.props.list.map((item,index)=>{
           return <div key={index} onClick={()=>{this.changeItemByParent(index)}}>{item}</div>
        })}
      </div>
    )
  }
}

参考：react 子组件调用父组件的方法时，this指向子组件的问题

19 消息订阅与发布机制-兄弟组件传值

订阅消息：1.消息名 2.发布消息
下载：npm i pubsub-js --save
使用：
（1）import PubSub from ‘pubsub-js’ 引入
（2）let token=PubSub.subscribe(‘delete’,function(data){} 订阅【token相对于订阅的id】
（3）PubSub.publish(‘delete’,data) 发布消息【参数一：消息名；参数二：携带的数据】
（4）PubSub.unsubscribe(‘token’) 取消订阅【传入订阅id取消订阅】

组件1：订阅消息

  //初始化状态
  state={
    users:[],
    isFirst:true,//是否为第一次打开页面
    isLoading:false,//是否为加载状态
    err:''//存储请求相关的错误信息
  }
 // 接收到两个参数 参数1：消息的名称 参数2：消息传递的值
  componentDidMount(){
    this.token=PubSub.subscribe('message',(msg,data)=>{
      this.setState(data)
    })
  }
  //取消订阅
  componentWillUnmount(){
    PubSub.unsubscribe(this.token)
  }

组件2：发布消息

search=()=>{
    //获取用户输入
    let keyword = this.keyWordNode.current.value
    // 发送请求前通知List更新状态
    PubSub.publish('message',{isFirst:false,isLoading:true})
    //发送网络请求
    axios.get(`http://localhost:3000/api1/search/users?q=${keyword}`).then(
      res=>{
        //请求成功后通知List更新状态
        PubSub.publish('message',{isLoading:false,users:res.data.items})
      },
      reason=>{
        //请求失败后通知更新List状态
        PubSub.publish('message',{isLoading:false,err:reason.message})
      }
    )
  }

20 -React 配置代理

方式1
方式：修改package.josn文件
注意：要重新启动脚手架

发送请求：

    axios.get('http://localhost:3000/students').then(
      res=>{console.log('成功',res.data)},
      error=>{console.log('失败')}
    )

3000端口要向5000端口发送请求修改代理之后发送请求的端口改为3000
缺点： 只能配置一个代理地址，当服务端地址改变后失效

方式2
在src文件夹下面添加setupProxy.js文件

const { createProxyMiddleware } = require("http-proxy-middleware")
module.exports = function (app) {
  app.use(
    createProxyMiddleware("/api1",{
      target: "http://localhost:5000", //配置转发目标地址(能返回数据的服务器地址)
      changeOrigin: true, //控制服务器接收到的请求头中host字段的值
      pathRewrite: { "^/api1": "" }, //重写请求路径
    }),
    createProxyMiddleware("/api2",{
      target: "http://localhost:5001", //配置转发目标地址(能返回数据的服务器地址)
      changeOrigin: true, //控制服务器接收到的请求头中host字段的值
      pathRewrite: { "^/api2": "" }, 
    })
  )
}

发送请求

  getStudentInfo = () => {
    axios.get("http://localhost:3000/api1/students").then(
      res => {
        console.log("成功", res.data);
      },
      error => {
        console.log("失败");
      }
    );
  };

21 fatch发送网络请求

没看

22 React路由

1.SPA的理解

1.单页web应用（single web page SPA）
2.整个应用只有一个完整的页面
3.点击页面中的链接不会刷新页面，只会做页面的局部更新
4.数据都需要通过ajax请求获取，并在前端异步呈现

2.路由的理解

一个路由就是一个映射关系（key:value）
key为路径，value可能是function或者component

注册路由 import {Link,Route } from "react-router-dom";

注意：要用BrowserRouter包裹 < App/> ，因为都需要包裹直接在index.js中操作

Link,Route都是路由组件为了规范About，Home都应该放在pages文件夹中而不是components
所以组件可以分为一般组件和路由组件
区别：
1 路由组件放在pages文件中，一般组件放在component文件中。
2 路由组件需要通过路由匹配调用一般组件直接使用
3 路由组件默认会收到props，一般组件只有手动传值才会有

22 封装NavLike

组件

import React, { Component } from 'react'
import {NavLink } from "react-router-dom";

export default class MyNavLink extends Component {
  render() {
    return (
        <NavLink className="list-group-item" activeClassName="active_nav" {...this.props}></NavLink>
    )
  }
}

NavLink可以通过指定activeClassName来指定active时的样式
这里的标签体内容【如about】会被接收到this.props.children中
接收的时候直接用 {…this.props} 来接收可以将属性直接放在标签中

使用

 <MyNavLink  to="/about">aboutMyNavLink>
 <MyNavLink  to="/home">homeMyNavLink>

23 使用Switch组件控制路由匹配

作用：当匹配到一个路由后就中断匹配，提高匹配效率。

import {Route,Switch } from "react-router-dom";

//当路由为/home时 结果：只显示Home组件而不显示Test组件。
<Switch>
     <Route path="/about" component={About}/>
     <Route path="/home" component={Home}/>
     <Route path="/home" component={Test}/>
Switch>

24 多层级路由刷新后样式丢失问题解决

        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
                <MyNavLink  to="/weijiamin/about">aboutMyNavLink>
                <MyNavLink  to="/weijiamin/home">homeMyNavLink>
            div>
          div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                  {/* 注册路由 */}
                  <Switch>
                      <Route path="/weijiamin/about" component={About}/>
                      <Route path="/weijiamin/home" component={Home}/>
                  Switch>
              div>
            div>
          div>
        div>

方法1.修改pubilc/index.js中的样式引入

   //不加./
    <link rel="stylesheet" href="/css/bootstrap.css">

方法2使用 %PUBLIC_URL%

    <link rel="stylesheet" href="%PUBLIC_URL%/css/bootstrap.css">

方法3 使用 HashRouter 【不常用】

import { HashRouter} from "react-router-dom";
//渲染App组件到页面
ReactDOM.render(
   <HashRouter>
      <App/>
    </HashRouter>
,document.getElementById('root')
)

25 路由匹配规则

1.默认是模糊匹配（最左匹配）
可以匹配的情况

<MyNavLink  to="/about/weijiamin">aboutMyNavLink>
<Route path="/about" component={About}/>

<MyNavLink  to="/about">aboutMyNavLink>
<Route path="/about" component={About}/>

2.开启精准匹配（全部都要相等）
exact
使用的原则：一般不使用

<MyNavLink  to="/weijiamin/about">aboutMyNavLink>
<Route exact path="/weijiamin/about" component={About}/>

26 设置默认的路由，路由重定向-Redirect

使用Redirect【重定向】

一般写在所有路由注册的最下方，当所有路由都无法匹配的时候，跳转到Redirect指定的路由一般用于编写默认路由

 {/* 注册路由 */}
 <Switch>
       <Route path="/about" component={About}/>
       <Route path="/home" component={Home}/>
       <Redirect to="/home">Redirect>
Switch>

27 嵌套路由

export default class Home extends Component {
  render() {
    return (
      <div>
        <ul className="nav nav-tabs">
          <li>
              <MyNavLink to="/home/news">news</MyNavLink>
          </li>
          <li>
              <MyNavLink to="/home/message">message</MyNavLink>
          </li>
        </ul>
        {/* 注册路由 */}
        <Switch>
            <Route path="/home/news" component={News}/>
            <Route path="/home/message" component={Message}/>
            <Redirect to="/home/message"></Redirect>
        </Switch>
      </div>
    )
  }

注意：

注册子路由的时候要写上父路由的path值。

路由的匹配是按照注册路由的顺序执行的。

28 路由传参

（28-1）路由传递params参数

{/* 像路由组件传递params参数 */}
<Link to={`/home/message/detail/${item.id}/${item.title}`}>{item.title}Link>

{/* 声明接收params参数 */}
<Route path="/home/message/detail/:id/:title" component={Detail}/>

组件接收参数

（28-2）路由传递search参数

像路由组件传递search参数 
<Link to={`/home/message/detail?id=${item.id}&title=${item.title}`}>{item.title}</Link>

{/* search参数无需声明接收 正常声明即可*/}
<Route path="/home/message/detail" component={Detail}/>

import qs from 'qs'
接收saerch参数
let {search} = this.props.location
let {id,title}= qs.parse(search.slice(1))

（28-3）路由接收state参数

区别：参数没有暴露在地址栏中。

像路由组件传递state参数
<Link to={{pathname:'/home/message/detail',state:{id:item.id,title:item.title}}}>{item.title}</Link>

{/* state参数无需声明接收 正常声明即可*/}
<Route path="/home/message/detail" component={Detail}/>

接收state参数
const {state}=this.props.location

虽然没有在地址栏中但是刷新state参数也不会消失
因为history对象一直记录了
但是清除内存后会消失
解决：
const {state}=this.props.location||{}

29 路由的push与replace

1.push（默认状态）

路由（栈）
http://localhost:3001/home/message/detail
http://localhost:3001/home/message
http://localhost:3001/home
http://localhost:3001/about

2.replace模式
开启replace模式

 <Link replace={true} to="/home/message/detail">{item.title}Link>

路由（栈）
http://localhost:3001/home/message/detail
~~http://localhost:3001/home/message~~
http://localhost:3001/home
http://localhost:3001/about

30 编程式路由导航

设置按钮

<button onClick={()=>{this.showReplace(item.id,item.title)}}>replace查看</button>
<button onClick={()=>{this.showPush(item.id,item.title)}}>push查看</button>

  showReplace=(id,title)=>{
    // replace跳转 携带params参数
    this.props.history.replace(`/home/message/detail/${id}/${title}`)
    // replace跳转 携带search参数
    this.props.history.replace(`/home/message/detail/?id=${id}&title=${title}`)
    // replace跳转 携带state参数
    this.props.history.replace('/home/message/detail',{id,title})
  }
  
  showPush=(id,title)=>{
    // push跳转 携带params参数
    this.props.history.push(`/home/message/detail/${id}/${title}`)
    //  push跳转 携带search参数
    this.props.history.push(`/home/message/detail/?id=${id}&title=${title}`)
    //  push跳转 携带state参数
    this.props.history.push('/home/message/detail',{id,title})
  }

注意：无论是哪种方式传递，声明接收参数和接收参数的要与之匹配

31 编程式路由前进和后退

<button onClick={this.back}>回退button>
<button onClick={this.forward}>前进button>
<button onClick={this.goByNum}>前进或后退几部button>

  back=()=>{
    this.props.history.goBack()
  }
  forward=()=>{
    this.props.history.goForward()
  }
  goByNum=()=>{
    // 正数为前进 负数为后退
    this.props.history.go(-2)
  }

32 withRouter的使用

withRouter可以加工一般组件，使一般组件具备路由组件特有的api
withRouter返回的是一个新组件

import React, { Component } from 'react'
import {withRouter} from 'react-router-dom'

class Header extends Component {
  back=()=>{
    this.props.history.goBack()
  }
  forward=()=>{
    this.props.history.goForward()
  }
  goByNum=()=>{
    // 正数为前进 负数为后退
    this.props.history.go(-2)
  }
  render() {
    return (
        <div className="page-header">
          <h2>React Router Demo</h2>
          <button onClick={this.back}>回退</button>
          <button onClick={this.forward}>前进</button>
          <button onClick={this.goByNum}>前进或后退几部</button>
        </div>
    )
  }
}

// 暴露的是withRouter加工后的Header
export default withRouter(Header)

33 BrowserRouter和HashRouter的区别

1.底层原理不同
BrowserRouter使用的H5的history API，不兼容IE9及以下
HashRouter使用的是URL的哈希值
2.url的表现形式不同
BrowserRouter：没#
HashRouter：有#
3.刷新后对路由state参数的影响
BrowserRouter：没有任何影响，因为state保存在location对象中
HashRouter：导致路由state丢失

备注：HashRouter可以用于解决一些路径错误相关问题。

34组件库 ant-design

（1）基本使用

ant-design官网

安装 npm install antd --save

（2）优化antd样式
修改主题色

安装依赖的包

npm install --save @craco/craco
npm i craco-less

修改样式引入

在根目录下创建 craco.config.js文件并修改配置

const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

4.修改package.json文件

 "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

5.运行

npm start

35 redux

35.0 redux概念

redux是什么？

是一个专门用于 管理状态 的js库，不是react插件库。

它可以用在react，angular，vue中，但基本与react配合。

作用：集中式管理react应用中多个组件共享的状态。

什么情况下用redux？

某个组件的状态需要让其他的组件可以随时拿到（共享）。

一个组件需要改变另一个组件的状态（通信）。

总体使用原则：能不用就不用，如果不用的情况比较吃力才用。

Action Creators：创建动作对象；

Store ：管理者；

Reducers：初始化状态、加工状态；

35.1 redux的三个核心概念

1.action

动作对象
包含两个属性：

type：标识的属性，值为字符串，唯一，必要的属性

data：数据的属性，值类型任意，可选属性
例：{type：‘ADD_STUDENT’,data:{name:‘tom’,age:18}}

2.reducer

1.用于初始化、加工状态
2.加工时，根据旧的state和action，产生新的state的纯函数

3.store

1.将state、action、reducer联系在一起的对象
2.如何得到此对象：
（1）import {createStore} from ‘redux’
（2）import reducer from ‘./reducers’
（3）const store=createStore(reducer)
3.此对象的功能：
（1）store.getState()得到state
（2）store.dispatch(action):分发action，触发reducer调用，产生新的state
（3）subscribe(listener）注册监听，当产生了新的state时自动调用

35.2 redux的精简使用

纯react版本

import React, { Component } from 'react'

export default class Count extends Component {
  state = {count:0}
  //加法
  increment=()=>{
    const {value} = this.selectNumber
    const {count} = this.state
    this.setState({count:count+value*1})
  }
  //减法
  decrement=()=>{
    const {value} = this.selectNumber
    const {count} = this.state
    this.setState({count:count-value*1})
  }
  //奇数加
  incrementOfOdd=()=>{
    const {value} = this.selectNumber
    const {count} = this.state
    if(count%2!==0){
      this.setState({count:count+value*1})
    }
  }
  //异步加
  incrementOfAsync=()=>{
    const {value} = this.selectNumber
    const {count} = this.state
    setTimeout(()=>{
      this.setState({count:count+value*1})
    },800)
  }
  render() {
    return (
      <div>
        <h1>当前求和为:{this.state.count}</h1>&nbsp;
        <select ref={c=>this.selectNumber=c}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>&nbsp;
        <button onClick={this.increment}>+</button>&nbsp;
        <button onClick={this.decrement}>-</button>&nbsp;
        <button onClick={this.incrementOfOdd}>当前求和为奇数加</button>&nbsp;
        <button onClick={this.incrementOfAsync}>异步加</button>
      </div>
    )
  }
}

redux版本

1.下载：npm i redux

store.js

// 该文件专门用于暴露一个store对象，整个应用只有一个store对象

// 引入createStore 用于创建store
import { createStore } from "redux";
// 引入为Count组件服务的reducer
import countReducer from './conut_reducer'


//暴露store
export default createStore(countReducer)

conut_reducer.js

//该文件是用于创建一个为count服务的reducer，reducer的本质就是一个函数

//reducer函数的两个参数
//preState:之前的状态
//action:要做的动作

//初始化状态
const initState = 0
export default function countReducer(preState=initState,action){    const {type,data} = action
    switch(type){
        case 'increment':
            return preState + data
        case 'decrement':
            return preState - data
        default:
            return preState
    }
}

注意：reducer中只写操作，判断条件等语句都写在组件中，reducers是纯函数。

count组件

import React, { Component } from "react";
//引入store用于获取store中保存的状态
import store from "../../redux/store";

export default class Count extends Component {
  increment = () => {
    //通知reducter加value
    const { value } = this.selectNumber;
    store.dispatch({type:'increment',data:value*1})
  };
  componentDidMount(){
      //检查redux中状态的变化，只要变化就调用render
      store.subscribe(()=>{
         this.setState({})
      })
  }
  render() {
    return (
      <div>
        {/* 获取store中的值 */}
        <h1>当前求和为{store.getState()}</h1>
        <select name="" id="" ref={c => (this.selectNumber = c)}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        &nbsp;
        <button onClick={this.increment}>+</button>&nbsp;
      </div>
    );
  }
}

使用的三个注意点：

store.getState()：获取store状态值。

store.dispatch({type:‘increment’,data:value*1})：告诉reducer动作对象

componentDidMount(){
store.subscribe(()=>{
this.setState({})
})
}：检查redux中状态的变化，只要变化就调用render

35.3 redux文件完整版

和精简版的区别在于
1.使用Action creator,不自传action
2.使用constant来规范类型

constant.js

// 该模块是用于定义action对象中的type类型 防止在编写过程中出错

export const INCREMENT = 'increment'

export const DECREMENT = 'decrement'

count_action.js

// 该文件专为Count组件生成action

import { INCREMENT,DECREMENT } from "./constant"

export const createIncrementAction = data => {
  return { type: INCREMENT, data };
};

export const createDecrementAction = data => {
  return { type: DECREMENT, data };
};

conut_reducer.js

//该文件是用于创建一个为count服务的reducer，reducer的本质就是一个函数
import { INCREMENT,DECREMENT } from "./constant"

//reducer函数的两个参数
//preState:之前的状态
//action:要做的动作
export default function countReducer(preState,action){
    console.log(preState,action)
    //初始化状态
    if(preState === undefined) preState = 0
    const {type,data} = action
    switch(type){
        case INCREMENT:
            return preState + data
        case DECREMENT:
            return preState - data
        default:
            return preState
    }
}

store.js

// 该文件专门用于暴露一个store对象，整个应用只有一个store对象

// 引入createStore 用于创建store
import { createStore } from "redux";
// 引入为Count组件服务的reducer
import countReducer from './conut_reducer'


//暴露store
export default createStore(countReducer)

Count组件

import React, { Component } from "react";
//引入store用于获取store中保存的状态
import store from "../../redux/store";
//引入actionCreate 专门用于创建action对象
import { createIncrementAction,createDecrementAction } from "../../redux/count_action";

export default class Count extends Component {
  increment = () => {
    //通知reducter加value
    const { value } = this.selectNumber;
    store.dispatch(createIncrementAction(value*1))
  };
  decrement = () => {
    const { value } = this.selectNumber;
    store.dispatch(createDecrementAction(value*1))
  };
  incrementIfOdd = () => {
    const { value } = this.selectNumber;
    const count = store.getState()
    if (count % 2 !== 0) {
        store.dispatch(createIncrementAction(value*1))
    }
  };
  componentDidMount(){
      //检查redux中状态的变化，只要变化就调用render
      store.subscribe(()=>{
         this.setState({})
      })
  }
  render() {
    return (
      <div>
        <h1>当前求和为{store.getState()}</h1>
        <select name="" id="" ref={c => (this.selectNumber = c)}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        &nbsp;
        <button onClick={this.increment}>+</button>&nbsp;
        <button onClick={this.decrement}>-</button>&nbsp;
        <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
        <button onClick={this.incrementAsync}>异步加</button>&nbsp;
      </div>
    );
  }
}

35.4 异步action（复习的时候看这版）

action类型	说明
对象类型	同步action
函数类型	异步action

下载依赖：npm i redux-thunk （异步action传递到store的中间件，使store可以接收到非对象类型的action）

异步action就是指action的值为函数，异步action中一般会调用同步action，异步action不是必须要使用的

store.js

// 该文件专门用于暴露一个store对象，整个应用只有一个store对象

// 引入createStore 用于创建store
import { createStore,applyMiddleware } from "redux";
// 引入为Count组件服务的reducer
import countReducer from './conut_reducer'
//引入 redux-thunk用于支持异步action
import thunk from "redux-thunk";


//暴露store
export default createStore(countReducer,applyMiddleware(thunk))

count_action.js

//同步action
export const createIncrementAction = data => {
  return { type: INCREMENT, data };
};
//异步action
export const createDecrementAsyncAction = (data,time) => {
    return (dispatch)=>{
        setTimeout(() => {
            dispatch(createIncrementAction(data))
        }, time);
    }
  };

异步action提供dispatch方法

Count组件

import React, { Component } from "react";
//引入store用于获取store中保存的状态
import store from "../../redux/store";
//引入actionCreate 专门用于创建action对象
import { createDecrementAsyncAction,createDecrementAction } from "../../redux/count_action";

export default class Count extends Component {
  incrementAsync = () => {
    const { value } = this.selectNumber;
    store.dispatch(createDecrementAsyncAction(value*1,2000))
  };
  componentDidMount(){
      //检查redux中状态的变化，只要变化就调用render
      store.subscribe(()=>{
         this.setState({})
      })
  }
  render() {
    return (
      <div>
        <h1>当前求和为{store.getState()}</h1>
        <select name="" id="" ref={c => (this.selectNumber = c)}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        <button onClick={this.incrementAsync}>异步加</button>&nbsp;
      </div>
    );
  }
}

36 react-redux

安装：npm i react-redux

36.1 react-dedux的基本使用

将Count改名为CountUI，且只保存html结构
创建容器组件在src下新建文件containers/Count/index用于放置CountUI的容器组件

//自定义容器组件

// 引入count的UI组件
import CountUI from '../../components/CountUI'
//引入connect用于链接容器组件和UI组件
import { connect } from "react-redux";


// 生成容器组件 并链接UI组件
const countContainer = connect()(CountUI)

export default countContainer

3.修改App.js中的引入，并向容器组件中传递store（到这一步就实现了容器和UI组件、容器和redux之间的连接）

import React, { Component } from 'react'
//渲染的是容器组件
import Count from './containers/Count'
import store from './redux/store'

export default class App extends Component {
  render() {
    return (
      <div><Count store={store}></Count></div>
    )
  }
}

4.Count容器向CountUI传props参数

当容器组件与store连接后，UI组件的props会自动收到store

5.容器组件和redux的数据沟通：

import CountUI from '../../components/CountUI'
import { connect } from "react-redux";
import {createIncrementAction} from '../../redux/count_action'

//这个函数有一个参数为redux的state
function a(state){
    return {count:state}
}
//这个函数有一个参数为dispatch 用于操作store的值
function b(dispatch){
    return {add:(data)=>{
        //通知redux执行increase
        dispatch(createIncrementAction(value))
    }}
}
const countContainer = connect(a,b)(CountUI)

export default countContainer

规范命名：

a函数：mapStateToProps

b函数：mapDispatchToProps

import CountUI from '../../components/CountUI'
import { connect } from "react-redux";
import { createIncrementAction,createDecrementAction } from "../../redux/count_action";

function mapStateToProps(state){
    return {count:state}
}
function mapDispatchToProps(dispatch){
    return {
        increace:data=>dispatch(createIncrementAction(data)),
        decreace:data=>dispatch(createDecrementAction(data))
    }
}
const countContainer = connect(mapStateToProps,mapDispatchToProps)(CountUI)

export default countContainer

6.UI组件使用props

increment = () => {
    const { value } = this.selectNumber;
    this.props.add(1*value)
 };

<h1>当前求和为:{this.props.count}h1>

36.2 react-dedux的优化

1.容器的优化

import CountUI from '../../components/CountUI'
import { connect } from "react-redux";
import { createIncrementAction,createDecrementAction } from "../../redux/count_action";

//简写方式
const countContainer = connect(
    //传递state参数
    state=>{return {count:state}},
    //对象的形式 只需提供action 就可以自动调用dispatch
    {
        increace:createIncrementAction,
        decreace:createDecrementAction
    }
)
(CountUI)

export default countContainer

2.无需使用store.subscribe进行监测

react-redux自动检测并更新，容器组件默认拥有检测redux变化的能力

3.App.js中传store的优化

优化：不在App.js中传，在index.js中传

App.js

import React, { Component } from 'react'
//渲染的是容器组件
import Count from './containers/Count'

export default class App extends Component {
  render() {
    return (
      // 给容器组件传递store
      <div><Count></Count></div>
    )
  }
}

index.js

import React from 'react';
import App from './App';
import { createRoot } from 'react-dom/client';
//引入store相关
import store from './redux/store';
import {Provider} from 'react-redux'


const container = document.getElementById('root');
const root = createRoot(container);
root.render( 
<Provider store={store}>
    <App />
</Provider>
);

4.整合容器组件和UI组件为一个组件

import React, { Component } from 'react'
import { connect } from "react-redux";
import {createIncrementAction,createDecrementAction,createIncrementActionAsync} from '../../redux/count_action'

//UI组件
class Count extends Component {
    state = {count:0}
    //加法
    increment=()=>{
      const { value } = this.selectNumber;
      this.props.increace(value*1)
    }
    //减法
    decrement=()=>{
      const {value} = this.selectNumber
      this.props.decreace(value*1)
    }
    //奇数加
    incrementOfOdd=()=>{
      const {value} = this.selectNumber
      if(this.props.count%2!==0){
        this.props.increace(value*1)
      }
    }
    //异步加
    incrementOfAsync=()=>{
      const {value} = this.selectNumber
      this.props.increaceAsyn(value*1,1000)
    }
    render() {
      console.log(this.props)
      return (
        <div>
          <h1>当前求和为:{this.props.count}</h1>&nbsp;
          <select ref={c=>this.selectNumber=c}>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
          </select>&nbsp;
          <button onClick={this.increment}>+</button>&nbsp;
          <button onClick={this.decrement}>-</button>&nbsp;
          <button onClick={this.incrementOfOdd}>当前求和为奇数加</button>&nbsp;
          <button onClick={this.incrementOfAsync}>异步加</button>
        </div>
      )
    }
  }
  

//容器组件  
const countContainer = connect(
    //传递state状态
    state=>{return {count:state}},
    //传递方法 react-redux自动分发
    {
        increace:createIncrementAction,
        decreace:createDecrementAction,
        increaceAsyn:createIncrementActionAsync
    }
    
)(Count)

export default countContainer

37 redux数据共享

37.1 重新修改redux文件结构

文件也可以直接用count.js命名、不一定要用count_action.js/count_reducer.js

文件内容按照redux需要来写可以参考 “redux文件完整版”

37.2 store.js

多个组件共同使用redux的情况

// 该文件专门用于暴露一个store对象，整个应用只有一个store对象

// 引入createStore 用于创建store
// applyMiddleware:使异步action可以被接收
// combineReducers:合并reducer
import { createStore,applyMiddleware,combineReducers } from "redux";

// 引入为Count组件服务的reducer
import countReducer from "./reducers/count_reducer";
//引入person的reducer
import personReducer from "./reducers/person_reducer";

//引入 redux-thunk用于支持异步action
import thunk from "redux-thunk";

//汇总reducer
const allReducer= combineReducers({
    count:countReducer,
    person:personReducer
})
//暴露store
export default createStore(allReducer,applyMiddleware(thunk))

37.3 constant.js

// 用于定义action对象中type的常量值 防止写错
//count
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'
//person
export const ADDPERSON = 'addperson'

37.4 action.js

person_action.js

import { ADDPERSON } from "../constant";

export const createAddPersonAction=(data)=>{
    return {type:ADDPERSON,data}
}

count_action.js

import { INCREMENT,DECREMENT } from "../constant";


export const createIncrementAction = data => {
    return { type: INCREMENT, data };
};

export const createDecrementAction = data => {
    return { type: DECREMENT, data };
};

export const createIncrementActionAsync = (data,time)=>{
    return (dispatch)=>{
        setTimeout(()=>{
            dispatch(createIncrementAction(data))
        },time)
    }
}

37.5 reducer.js

person_reducer.js

import { ADDPERSON } from "../constant";

const initState=[{id:'001',name:'tome',age:15}]
export default function personReducer(preState=initState,action){
    const {type,data} = action
    switch(type){
        case ADDPERSON:
            // return preState.push(data)
            return [data,...preState]
        default:  
            return preState
    }
}

count_reducer.js

// 初始化
import { INCREMENT,DECREMENT } from "../constant";
const initState = 0
export default function countReducer(preState = initState,action){
    const {type,data} = action
    switch(type){
        case INCREMENT:
            return preState = preState+data
        case DECREMENT:
            return preState = preState-data
        default:
            return preState
    }
}

37.3 组件内使用

person

import React, { Component } from 'react'
import {nanoid} from 'nanoid'
import { connect } from 'react-redux'
import { createAddPersonAction } from '../../redux/actions/person_action'

class Person extends Component {
  addPerson =()=>{
    const age  = this.age.value
    const name = this.name.value
    const person = {id:nanoid(), name,age}
    this.props.createAddPersonAction(person)
  }
  render() {
    return (
      <div>
        <h1>我是person组件</h1>
        <div>我拿到的count值：{this.props.count}</div>
        <input ref={c=>this.name=c} type="text" placeholder='输入名字'/>
        <input ref={c=>this.age=c} type="text" placeholder='输入年龄'/>
        <button onClick={this.addPerson}>添加</button>
        <ul>
          {this.props.person.map((item)=>{
            return <li key={item.id}>{item.name}--{item.age}</li>
          })}
        </ul>
      </div>
    )
  }
}


const PersonContainer = connect(
  state=>{return {
    count:state.count,
    person:state.person
  }},
  {
    createAddPersonAction:createAddPersonAction
  }
)(Person)

export default PersonContainer

count

import React, { Component } from 'react'
import { connect } from "react-redux";
import {createIncrementAction,createDecrementAction,createIncrementActionAsync} from '../../redux/actions/count_action'

//UI组件
class Count extends Component {
    increment=()=>{
      const { value } = this.selectNumber;
      this.props.increace(value*1)
    }
    //减法
    decrement=()=>{
      const {value} = this.selectNumber
      this.props.decreace(value*1)
    }
    //奇数加
    incrementOfOdd=()=>{
      const {value} = this.selectNumber
      if(this.props.count%2!==0){
        this.props.increace(value*1)
      }
    }
    //异步加
    incrementOfAsync=()=>{
      const {value} = this.selectNumber
      this.props.increaceAsyn(value*1,1000)
    }
    render() {
      return (
        <div>
          <h1>我是Coun组件</h1>
          <div>我拿到的person：</div>
          <ul>
            {this.props.person.map((item)=>{
              return <li key={item.id}>{item.name}-{item.age}</li>
            })}
          </ul>
          <h3>当前求和为:{this.props.count}</h3>&nbsp;
          <select ref={c=>this.selectNumber=c}>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
          </select>&nbsp;
          <button onClick={this.increment}>+</button>&nbsp;
          <button onClick={this.decrement}>-</button>&nbsp;
          <button onClick={this.incrementOfOdd}>当前求和为奇数加</button>&nbsp;
          <button onClick={this.incrementOfAsync}>异步加</button>
        </div>
      )
    }
  }
  

//容器组件  
const countContainer = connect(
    //传递state参数
    state=>{return {count:state.count,person:state.person}},
    //传递方法 react-redux自动分发
    {
        increace:createIncrementAction,
        decreace:createDecrementAction,
        increaceAsyn:createIncrementActionAsync
    }
    
)(Count)

export default countContainer

app.js

import React, { Component } from 'react'
//渲染的是容器组件
import Count from './containers/Count/Count'
// import Test from './containers/test'
import Person from './containers/Person/Person'

export default class App extends Component {
  render() {
    return (
      // 给容器组件传递store
      <div>
        <Count></Count>
        <hr></hr>
        <Person></Person>
      </div>
    )
  }
}

最终效果

38 纯函数

是一类特别的函数：只要是同样的输入（实参），必定得到同样的输出（返回）。
————————————————————————————
必须遵循以下规则：
（1）不得改写参数数据
（2）不会产任何副作用，例如网络请求，输入和输出设备
（3）不能调用Date.now()或者Math.randing()等不纯的方法
————————————————————————————
redux的reducer必须是一个纯函数

39 redux扩展插件应用

安装库：npm install redux-devtools-extension
修改redux/store.js

// 该文件专门用于暴露一个store对象，整个应用只有一个store对象

//引入redux-devtools-extension
import {composeWithDevTools} from 'redux-devtools-extension'

// 引入createStore 用于创建store
// applyMiddleware:使异步action可以被接收
// combineReducers:合并reducer
import { createStore,applyMiddleware,combineReducers } from "redux";

// 引入为Count组件服务的reducer
import countReducer from './reducers/conut'
//引入person的reducer
import personReducer from "./reducers/person";

//引入 redux-thunk用于支持异步action
import thunk from "redux-thunk";

//汇总reducer
const allReducer= combineReducers({
    count:countReducer,
    person:personReducer
})
//暴露store
export default createStore(allReducer,composeWithDevTools(applyMiddleware(thunk)))

40 打包react项目

1.执行：npm run build
生成build文件

2.安装库：npm i serve -g
用于开启服务器

3. 执行：serve build
以build文件夹作为根路径来启动一台服务器

在工作上是用不到的

扩展1-关于setState()

(1). setState(stateChange, [callback])------对象式的setState
1.stateChange为状态改变对象(该对象可以体现出状态的更改)
2.callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用
setState引起react更新的动作是异步的

(2). setState(updater, [callback])------函数式的setState
1.updater为返回stateChange对象的函数。
2.updater可以接收到state和props。
4.callback是可选的回调函数, 它在状态更新、界面也更新后(render调用后)才被调用。

总结:
1.对象式的setState是函数式的setState的简写方式(语法糖)
2.使用原则：
(1).如果新状态不依赖于原状态 ===> 使用对象方式
(2).如果新状态依赖于原状态 ===> 使用函数方式
(3).如果需要在setState()执行后获取最新的状态数据,
要在第二个callback函数中读取

1.setState()的第一种用法

  //setState的第一种用法
  add = () => {
      const {count}=this.state
      this.setState({count:count+1},()=>{
          console.log("在回调函数中",this.state)
      })
      console.log("不在回调函数中",this.state)
  };

输出结果：
不在回调函数中 {count: 0}
在回调函数中 {count: 1}

2.setState()的第二种用法

  add=()=>{
      this.setState((state,props)=>{
          return {count:state.count+1}
      })
  }

扩展2-LazyLoad懒加载

通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包
const Login = lazy(()=>import('@/pages/Login'))

通过React的Suspense来控制组件还没有加载好时的状态
loading...

}

// 引入lazy,Suspense
import React, { Component,lazy,Suspense } from "react";
import {NavLink,Route } from "react-router-dom";
//lazy和import一起使用 注册可以懒加载的组件
const Home= lazy(()=>import('./Home'))
const About= lazy(()=>import('./About'))

//创建并暴露App外壳组件s
export default class App extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <div className="page-header"><h2>React Router Demo</h2></div>
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              {/* 在react考路由链接切换组件 */}
                <NavLink className="list-group-item" to="/about" >about</NavLink>&nbsp;
                <NavLink className="list-group-item" to="/home">home</NavLink>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                  {/* 注册路由 */}
                  {/* 使用Suspense来控制组件还没有加载好时的状态,这里最好是一个loading的组件 */}
                    <Suspense fallback={<h1>loading...</h1>}>
                        <Route path="/about" component={About}/>
                        <Route path="/home" component={Home}/>
                    </Suspense>
              </div>
            </div>
          </div>
        </div>
    </div>
    )
  }
}

扩展3-Hooks

什么是Hooks？
(1). Hook是React 16.8.0版本增加的新特性/新语法
(2). 可以让你在函数组件中使用 state 以及其他的 React 特性

3个常用的hooks
(1). State Hook: React.useState()
(2). Effect Hook: React.useEffect()
(3). Ref Hook: React.useRef()

React.useState()：使函数式组件能有state和修改state

export default function Demo() {
  //React.useState的参数为state的初始值
  //React.useState的返回值为一个数组 第一个值为state的值 第二个值为改变state的方法
  const [count,setCount] = React.useState(0);

  function add() {
    //setState的第一种写法
    setCount(count+1)
    //setState的第二种写法
    setCount(count=>count+1)
  }
  return (
    <div>
      <h1>现在的值为：{count}</h1>
      <button onClick={add}>点我加1</button>
    </div>
  );
}

注意：在更新对象类型时，切记要合并旧的状态，否则旧的状态会丢失。

const [params, setParams] = useState({
  rotate: 0,
  color: "#000000"
});

const handleInputChange = event => {
  const target = event.target;
  setParams({
    ...params,
    [target.name]: target.value
  });
};

注意：因为是要修改useState处理后的值，所有需要使用useCallback来处理，其他要进行一次浅拷贝

 const emailMouseLeave = useCallback((changeIndex)=>{
    let result = email.concat()
    result.forEach((item,index)=>{
      if(index === changeIndex){
        item.isHover = false
      }
    })
    setEmail(result)
  },[email])

React.useEffect()：使函数式组件具备钩子函数

export default function Demo() {
   const [count,setCount] = React.useState(0);
  //React.useEffect可以传入两个参数 
  //第一个参数 ：为一个函数，这个函数就相当于一个生命周期的回调函数
  //第二个参数 ：为一个数组，里面的值相当于监测谁 
  //          不写：谁都监测，
  //          空数组：谁都不监测，此时第一个参数相当于componentDidMount的回调
  //          [count,name]：监测count和name，此时第一个参数相当于componentDidUpdate的回调

  //React.useEffect 返回值为一个函数，这个函数就相当于componentWillUnmount的回调
  React.useEffect(() => {
      let timer=setInterval(()=>{
          setCount(count=>count+1)
      },1000)
      return ()=>{
          clearInterval(timer)
      }
  },[]);
  //卸载组件的回调
  function unMount(){
    ReactDom.unmountComponentAtNode(document.getElementById('root'))
  }
  return (
    <div>
      <h1>现在的值为：{count}</h1>
      <button onClick={unMount}>卸载组件</button>
    </div>
  );
}

卸载组件：
引入：import ReactDom from ‘react-dom’
卸载：ReactDom.unmountComponentAtNode(document.getElementById(‘root’))

React.useRef():使函数组件支持ref

export default function Demo() {
   const myRef=React.useRef()
   function show(){
       alert(myRef.current.value)
   }
   return (
     <div>
       <input type="text" name="" id="" ref={myRef}/>
       <button onClick={show}>点击按钮展示内容</button>
     </div>
   );
 }

扩展4-Fragment

Fragment的作用？
代替div在解析的时候会忽略掉，就不会出现不必要的真实dom外层标签了

import React, { Component,Fragment } from 'react'
import Demo from './components/4_Fragment'

export default class App extends Component {
  render() {
    return (
        <Fragment>
          <Demo></Demo>
        </Fragment>
    )
  }
}

Fragment可以接收一个参数 key，可以用于循环遍历的时候

扩展5-Context

1.Context的作用？
用于组件间的通信，常用与【祖组件】和【后代组件】之间

使用context

1.创建context容器对象，并取出Provider

const UserNameContext=React.createContext()
const {Provider,Consumer} = UserNameContext

2.渲染子组件的时候。外面要包裹Provider，通过value属性给后代传递数据

export default class A extends Component {
  state={username:'tom'}
  render() {
    return (
      <div className='parent'>
          <h3>我是A组件</h3>
          <h4>我的用户名是{this.state.username}</h4>
          //必须是value 不允许改名
          <Provider value={this.state.username}>
            <B/>
          </Provider>
      </div>
    )
  }
}

3.后代读取数据
（1）方法一：仅用于类式组件

class C extends Component {
  //声明接收
   static contextType=UserNameContext
    render() {
      console.log(this)
      return (
        <div className='grand'>
          <h3>我是B组件</h3>
          <h4>我从A组件接收到的用户名是：{this.context}</h4>
        </div>
      )
    }
}

（2）方法二：函数式组件和类式组件都可以使用

function C(){
  return (
    <div className='grand'>
      <h3>我是B组件</h3>
      <h4>我从A组件接收到的用户名是：
        <Consumer>
          {
            value=>{
              return `${value.username}`
            }
          }
        </Consumer>
      </h4>
    </div>
  )
}

在应用的开发中一般不使用context，一般用它来封装react插件

扩展6-PureComponent

component存在的两个问题：
（1）只要执行了setState即使不改变数据组件也会重新render。
（2）当组件重新render()，就会自动重新render子组件，即使子组件没有用父组件的任何东西的时候。
----》效率低

原因：
component中的shouldComponentUpdate()总是返回true

解决1：重写shouldComponentUpdate()

  shouldComponentUpdate(nextProps, nextState) {
    console.log(nextProps, nextState); //要变化成的目标props，state
    console.log(this.props, this.state); //变化前的props,state
    if (this.state.carName === nextState.carName) return false;
  }

解决2：不用component而用purcomponent【内部实现就是重写了shouldComponentUpdate】
使用这种方法不要直接修改数据而要产生新的数据

import React, { PureComponent } from "react";
import "./index.css";

export default class Parent extends PureComponent {
  state = { carName: "car1" };
  changeCar = () => {
    this.setState({ carName: "car2" });
  };
  shouldComponentUpdate(nextProps, nextState) {
    console.log(nextProps, nextState); //要变化成的目标props，state
    console.log(this.props, this.state); //变化前的props,state
    if (this.state.carName === nextState.carName) return false;
  }
  render() {
    return (
      <div className="parent">
        <h2>我是Parent</h2>
        <button onClick={this.changeCar}>点我换车</button>
        <h4>我的车是：{this.state.carName}</h4>
        <Child carName={this.state.carName}/>
      </div>
    );
  }
}

class Child extends PureComponent {
//   shouldComponentUpdate(nextProps, nextState) {
//     console.log(nextProps, nextState); //要变化成的目标props，state
//     console.log(this.props, this.state); //变化前的props,state
//     if (this.props.carName === nextProps.carName) return false;
//   }
  render() {
    return (
      <div className="child">
        <h2>我是Child</h2>
        <h4>我接到的车是：{this.props.carName}</h4>
      </div>
    );
  }
}

扩展7-renderProps

import React, { Component } from "react";
import "./index.css";

export default class Parent extends Component {
  state = { username: "tom" };
  render() {
    return (
      <div className="parent">
        <h3>我是Parent组件</h3>
        <h4>我的用户名是{this.state.username}</h4>
        //传参
        <A render={(name) => <B name={name}/>} />
      </div>
    );
  }
}

class A extends Component {
  state = { name: "tom" };
  render() {
    const {name} = this.state
    console.log(this.props);
    return (
      <div className="child">
        <h3>我是A组件</h3>
        //调用子组件
        {this.props.render(name)}
      </div>
    );
  }
}

//类式组件接收
class B extends Component {
  render() {
    return (
      <div className="grand">
        <h3>我是B组件</h3>
        //接收
        <h4>我接到的名字:{this.props.name}</h4>
      </div>
    );
  }
}

扩展8:-ErrorBoundary错误边界

用于捕获组件生命周期产生的错误，一般是当后端返回的数据不正确的时候使用
错误边界：不要让一个组件的错误影响整个组件，使错误控制在一定的范围内

import React, { Component } from "react";
import Child from "./Child";

export default class Prrent extends Component {
  //hasError：用于标识子组件是否产生错误
  state={hasError:''}
  //当parent的子组件出现错误的时候会调用getDerivedStateFromError并且携带错误信息
  static getDerivedStateFromError(error){
    console.log(error)
    return {hasError:error}
  }

  //渲染组件出错会调用这个函数，一般用于做统计错误，反馈给服务器，用于通知编码人员进行bug修复
  componentDidCatch(){
    console.log('渲染组件出错')
  }
  
  render() {
    return (
      <div>
        <h2>我是Parent组件</h2>
        {this.state.hasError?<h2>出错啦...</h2>:<Child />}
      </div>
    );
  }
}

错误边界只使用与生产环境，在开发环境下还是会报错。

扩展9-组件之间通信方式的总结

1.组件见的关系

父子

兄弟

子孙

2.组件之间的通信方式

props：（1）chilren props （2）render props

消息订阅-发布

集中式管理 redux

conText 生产者-消费者模式

3.比较好的搭配

父子组件：props

兄弟组件：消息订阅预发布、集中式管理

祖孙组件：消息订阅与发布、集中式管理、conText（开发用的少，封装插件用的多）

41 react-router6

安装：npm i react-router-dom

（41-1）router6的基本使用

默认使用（不区分大小写）：
区分大小写使用：caseSensitive path=“/about” element={} />

import React from "react";
import {NavLink,Routes,Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";

export default function App() {
  return (
    <div>
      <div className="row">
        <div className="col-xs-offset-2 col-xs-8">
          <div className="page-header">
            <h2>React Router Demoh2>
          div>
        div>
      div>
      <div className="row">
        <div className="col-xs-2 col-xs-offset-2">
          <div className="list-group">
            {/* 在react考路由链接切换组件 */}
            <NavLink className="list-group-item" to="/about"> aboutNavLink>
            <NavLink className="list-group-item" to="/home">HomeNavLink>
          div>
        div>
        <div className="col-xs-6">
          <div className="panel">
            <div className="panel-body">
              {/* 注册路由 */}
              <Routes>
                  <Route path="/about" element={>} />
                  <Route path="/home" element={>} />
              Routes>
            div>
          div>
        div>
      div>
    div>
  );
}

对比route5：
（1）用Routes代替Switch包裹Route
（2）用 } /> 代替

（41-2）router6的重定向

基本使用（默认push形式跳转）：
replace形式跳转：replace={true}/>

1.注册路由时使用

{/* 注册路由 */}
<Routes>
    <Route path="/about" element={>} />
    <Route path="/home" element={>} />
    } />
Routes>

2.路由跳转时使用

import React ,{useState}from 'react'
import {Navigate} from 'react-router-dom'

export default function Home() {
  const [state,setState] = useState({num:1})
  function addStateNum(){
    setState({num:state.num+1})
  }
  return (
    <div>
      <h2>Home组件的内容</h2>
      //值为2的时候跳转到about组件
      {state.num === 2?<Navigate to='/about'/>:<h4>当前sum的值为：{state.num}</h4>}
      <button onClick={addStateNum}>点我+1</button>
    </div>
  )
}

（41-3）router6的NavLink高亮效果

基本使用：

<NavLink className={({isActive})=>isActive?'weijiamin':'list-group-item'} to="/about"> about</NavLink>

优化：

  function computedClassName({isActive}){
    return isActive?'list-group-item weijiamin':'list-group-item'
  }

{/* 在react考路由链接切换组件 */}
<NavLink className={computedClassName} to="/about"> aboutNavLink>
<NavLink className={computedClassName} to="/home">HomeNavLink>

（41-4）router6的路由表的使用

import {useRoutes} from "react-router-dom";

路由表
  const elements=useRoutes([
    {path:'/about',element:<About/>},
    {path:'/home',element:<Home/>},
    {path:'/',element:<Navigate to={'/about'}/>},
  ])

    <div>
      <div className="row">
        <div className="col-xs-offset-2 col-xs-8">
          <div className="page-header">
            <h2>React Router Demoh2>
          div>
        div>
      div>
      <div className="row">
        <div className="col-xs-2 col-xs-offset-2">
          <div className="list-group">
            {/* 注册路由链接 */}
            <NavLink className="list-group-item" to="/about"> aboutNavLink>
            <NavLink className="list-group-item" to="/home">HomeNavLink>
          div>
        div>
        <div className="col-xs-6">
          <div className="panel">
            <div className="panel-body">
              {/* 注册路由 */}
              {elements}
            div>
          div>
        div>
      div>
    div>

一般是把路由表的数据放在文件 src/routers/index.js 中，再在组件中引入

import Home from "../pages/Home";
import About from "../pages/About";
import { Navigate } from "react-router-dom";

const routes = [
  { path: "/about", element: <About /> },
  { path: "/home", element: <Home /> },
  { path: "/", element: <Navigate to={"/about"} /> },
];

export default routes;

import React from "react";
import {NavLink,useRoutes} from "react-router-dom";
import routes from "./routes";
export default function App() {
  const elements=useRoutes(routes)
  return (
    <div>
      <div className="row">
        <div className="col-xs-offset-2 col-xs-8">
          <div className="page-header">
            <h2>React Router Demo</h2>
          </div>
        </div>
      </div>
      <div className="row">
        <div className="col-xs-2 col-xs-offset-2">
          <div className="list-group">
            {/* 注册路由链接 */}
            <NavLink className="list-group-item" to="/about"> about</NavLink>
            <NavLink className="list-group-item" to="/home">Home</NavLink>
          </div>
        </div>
        <div className="col-xs-6">
          <div className="panel">
            <div className="panel-body">
              {/* 注册路由 */}
              {/* 
                  } />
                  } />
                  } />
               */}
              {elements}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

（41-5）router6嵌套路由

注册路由表
  {
    path: "/home",
    element: <Home />,
    children: [
      { path: "news", element: <News /> },
      { path: "message", element: <Message /> },
    ],
  },

import React from 'react'
import {NavLink,Outlet} from 'react-router-dom'

    <div>
      <h2>Home组件的内容h2>
      <div>
          <div className="list-group">
            <NavLink className="list-group-item" to="news">aboutNavLink>
            <NavLink className="list-group-item" to="message">aboutNavLink>
          div>
          <div>
            {/* 指定路由组件呈现的位置 */}
            <Outlet/>
          div>
      div>
    div>

（41-6）router6路由传参

1.传递params参数：

声明传递params参数

<NavLink to={`detail/${item.id}/${item.title}/${item.content}`}>{item.title}NavLink>

声明接收params参数

{
  path: "message",
  element: <Message />,
  children: [
    {
      // 声明接收params参数
       path: "detail/:id/:title/:content",
       element: <Detail />,
    },
  ],
},

接收params参数

1.传递search参数：

声明传递search参数：

<NavLink to={`detail?id=${item.id}&title=${item.title}&content=${item.content}`}>{item.title}</NavLink>

声明接收search参数：

{
  path: "message",
  element: <Message />,
  children: [
    {
      // 声明接收params参数
       path: "detail",
       element: <Detail />,
    },
  ],
},

接收search参数：

setSearch的用法：

import React from "react";
import { useSearchParams } from "react-router-dom";

export default function Detail() {
  const [search,setSearch] = useSearchParams()
  return (
    <div>
      <ul>
        <li>
          <button onClick={()=>{setSearch('id=11&title=哈哈&content=呜呜')}}>点我更新收到的serch参数</button>
        </li>
        {/* 调用serrch身上的get方法来获值 */}
        <li>{search.get('id')}</li>
        <li>{search.get('title')}</li>
        <li>{search.get('content')}</li>
      </ul>
    </div>
  );
}

3.传递state参数

声明传递state参数：

<NavLink to="detail" state={{id:item.id,title:item.title,content:item.content}}>
    {item.title}
NavLink>

声明接收state参数：

{
  path: "message",
  element: <Message />,
  children: [
    {
      // 声明接收params参数
       path: "detail",
       element: <Detail />,
    },
  ],
},

接收state参数：

（41-7）编程式路由导航

可以用于路由组件和非路由组件

import { NavLink,Outlet,useNavigate} from "react-router-dom";
  const navigate = useNavigate()
  function toDeatil(item){
    //第一个参数是要跳转的路径、第二个参数是一个配置对象
    navigate('detail',{
      replace:false,
      //目前只能携带state参数 如果要携带其他类型的参数，拼在路径中
      state:{
        id:item.id,
        title:item.title,
        content:item.content
      }
    })
  }
  function goForward(){
    navigate(1)
  }
  function goBack(){
    navigate(-1)
  }

（41-8）Hook-useInRouterContext

用于判断当前组件是否处于的上下文环境中，如果是，则返回true否则返回false

import { useInRouterContext} from "react-router-dom";

console.log(useInRouterContext())

（41-9）Hook-useNavigationType

作用：用于返回当前的导航类型（用户是如何来到当前页面的）
返回值：POP、PUSH、REPLACE
备注：POP是指在浏览器中直接打开了这个路由组件（刷新页面）

import { useNavigationType} from "react-router-dom";

console.log(useNavigationType())

（41-10）Hook-useOutlet

作用：用于返回当前组件中渲染的嵌套路由
说明：
如果嵌套的路由组件还没有挂载，则返回null
如果嵌套的路由组件已经挂载，则展示嵌套的路由对象

import { useOutlet} from "react-router-dom";

console.log(useOutlet())

（41-11）Hook-useResolvePath()

作用：给一个url值，解析其中的：path，search，hash值

import { useResolvePath} from "react-router-dom";

console.log(useResolvePath('/user?id=88&name=777'))

输出内容：
{hash: “”
pathname: “/user”
search: “?id=88&name=777”}

你可能感兴趣的:(前端框架,react,前端,react,react.js,前端框架)

Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
【加密社】Solidity 中的事件机制及其应用加密社闲侃区块链智能合约区块链
加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
node.js学习小猿L node.js node.js 学习 vim
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
springboot+vue项目实战一-创建SpringBoot简单项目苹果酱0567 面试题汇总与解析 spring boot 后端 java 中间件开发语言
这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
react-intl——react国际化使用方案苹果酱0567 面试题汇总与解析 java 开发语言中间件 spring boot 后端
国际化介绍i18n：internationalization国家化简称，首字母+首尾字母间隔的字母个数+尾字母，类似的还有k8s(Kubernetes)React-intl是React中最受欢迎的库。使用步骤安装#usenpmnpminstallreact-intl-D#useyarn项目入口文件配置//index.tsximportReactfrom"react";importReactDOMf
博客网站制作教程 2401_85194651 java maven
首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
最简单将静态网页挂载到服务器上(不用nginx) 全能全知者服务器 nginx 运维前端 html 笔记
最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
补充元象二面 Redstone Monstrosity 前端面试
1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
微信小程序开发注意事项 jun778895 微信小程序小程序
微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
字节二面 Redstone Monstrosity 前端面试
1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
前端代码上传文件余生逆风飞翔前端 javascript 开发语言
点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
360前端星计划-动画可以这么玩马小蜗
动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
Vue + Express实现一个表单提交九旬大爷的梦
最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
前端知识点 ZhangTao_zata 前端 javascript css
下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
第三十一节:Vue路由:前端路由vs后端路由的了解曹老师
1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访
华雁智科前端面试题因为奋斗超太帅啦前端笔试面试问题整理 javascript 开发语言 ecmascript
1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l
如何建设数据中台（五）——数据汇集—打破企业数据孤岛 weixin_47088026 学习记录和总结中台数据中台程序人生经验分享
数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi
分布式锁和spring事务管理暴躁的鱼锁及事务分布式 spring java
最近开发一个小程序遇到一个需求需要实现分布式事务管理业务需求用户在使用小程序的过程中可以查看景点，对景点地区或者城市标记是否想去，那么需要统计一个地点被标记的人数，以及记录某个用户对某个地点是否标记为想去，用两个表存储数据，一个地点表记录改地点被标记的次数，一个用户意向表记录某个用户对某个地点是否标记为想去。由于可能有多个用户同时标记一个地点，每个用户在前端点击想去按钮之后，后台接收到请求，从数据
前端CSS面试常见题剑亦未配妥前端面试前端 css 面试
边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子
【JS】前端文件读取FileReader操作总结程序员-张师傅前端前端 javascript 开发语言
前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi
【前端】vue 报错:The template root requires exactly one element 程序员-张师傅前端前端 vue.js javascript
【前端】vue报错:Thetemplaterootrequiresexactlyoneelement在Vue.js中，当你遇到错误“Thetemplaterootrequiresexactlyoneelement”时，这通常意味着你的Vue组件的模板（template）根节点不是单一的元素。Vue要求每个组件的模板必须有一个根元素来包裹所有的子元素。这个错误通常出现在以下几种情况：模板中有多个并行
从单体到微服务：FastAPI ‘挂载’子应用程序的转变黑金IT fastapi 微服务 fastapi 架构
在现代Web应用开发中，模块化架构是一种常见的设计模式，它有助于将大型应用程序分解为更小、更易于管理的部分。FastAPI，作为一个高性能的PythonWeb框架，提供了强大的支持来实现这种模块化设计。通过“挂载”子应用程序，我们可以为不同的功能区域（如前端接口、管理员接口和用户中心）创建独立的应用程序，并将它们整合到一个主应用程序中。本文将详细介绍如何在FastAPI中使用“挂载”子应用程序的方
创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端 ui 服务器
前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
了解 UNPKG：前端开发者的包管理利器小于负无穷前端 javascript typescript css html5 node.js
在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n
前端three.js的Sprite模拟下雪动画效果 qq_35430208 three.js 前端 javascript 三维场景中下雪效果 threejs实现下雪效果
一、效果如图所示：二、原理同下雨一样三、完整代码：index.jsimport*asTHREEfrom'three';import{OrbitControls}from'three/addons/controls/OrbitControls.js';importmodelfrom'./model.js';//模型对象//场景constscene=newTHREE.Scene();scene.add
系列3：【深入】qiankun动态与按需加载子应用—像电影一样控制出现时机 rabbit_it qiankun学习前端框架前端阿里云
一、引言：为何需要动态加载在现代前端开发中，性能优化始终是一个关键问题。对于微前端架构而言，管理多个子应用带来了前所未有的灵活性，但也对资源的加载和使用效率提出了更高要求。假设你的微前端项目就像一场电影，而子应用是场景或演员。在不同的情节中，我们只需要特定的场景和演员出现，而不需要所有场景和演员一开始就站在舞台上等待。这时，动态加载和按需加载就成为了关键工具——让需要的内容在正确的时机上场，节省性
github中多个平台共存 jackyrong github
在个人电脑上，如何分别链接比如oschina,github等库呢，一般教程之列的，默认 ssh链接一个托管的而已，下面讲解如何放两个文件 1）设置用户名和邮件地址 $ git config --global user.name "xx" $ git config --global user.email "[email protected]"
ip地址与整数的相互转换(javascript) alxw4616 JavaScript
//IP转成整型 function ip2int(ip){ var num = 0; ip = ip.split("."); num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[3]); n
读书笔记-jquey+数据库+css chengxuyuancsdn html jquery oracle
1、grouping ,group by rollup, GROUP BY GROUPING SETS区别 2、$("#totalTable tbody>tr td:nth-child(" + i + ")").css({"width":tdWidth, "margin":"0px", &q
javaSE javaEE javaME == API下载 Array_06 java
oracle下载各种API文档： http://www.oracle.com/technetwork/java/embedded/javame/embed-me/documentation/javame-embedded-apis-2181154.html JavaSE文档： http://docs.oracle.com/javase/8/docs/api/ JavaEE文档： ht
shiro入门学习 cugfy java Web 框架
声明本文只适合初学者，本人也是刚接触而已，经过一段时间的研究小有收获，特来分享下希望和大家互相交流学习。首先配置我们的web.xml代码如下，固定格式，记死就成 <filter> <filter-name>shiroFilter</filter-name> &nbs
Array添加删除方法 357029540 js
刚才做项目前台删除数组的固定下标值时，删除得不是很完整，所以在网上查了下，发现一个不错的方法，也提供给需要的同学。 //给数组添加删除 Array.prototype.del = function(n){
navigation bar 更改颜色张亚雄 IO
今天郁闷了一下午，就因为objective-c默认语言是英文，我写的中文全是一些乱七八糟的样子，到不是乱码，但是，前两个自字是粗体，后两个字正常体，这可郁闷死我了，问了问大牛，人家告诉我说更改一下字体就好啦，比如改成黑体，哇塞，茅塞顿开。翻书看，发现，书上有介绍怎么更改表格中文字字体的，代码如下
unicode转换成中文 adminjun unicode 编码转换
在Java程序中总会出现\u6b22\u8fce\u63d0\u4ea4\u5fae\u535a\u641c\u7d22\u4f7f\u7528\u53cd\u9988\uff0c\u8bf7\u76f4\u63a5这个的字符，这是unicode编码，使用时有时候不会自动转换成中文就需要自己转换了使用下面的方法转换一下即可。 /** * unicode 转换成中文
一站式 Java Web 框架 firefly aijuans Java Web
Firefly是一个高性能一站式Web框架。涵盖了web开发的主要技术栈。包含Template engine、IOC、MVC framework、HTTP Server、Common tools、Log、Json parser等模块。 firefly-2.0_07修复了模版压缩对javascript单行注释的影响，并新增了自定义错误页面功能。更新日志：增加自定义系统错误页面功能
设计模式——单例模式 ayaoxinchao 设计模式
定义 Java中单例模式定义：“一个类有且仅有一个实例，并且自行实例化向整个系统提供。” 分析从定义中可以看出单例的要点有三个：一是某个类只能有一个实例；二是必须自行创建这个实例；三是必须自行向系统提供这个实例。 &nb
Javascript 多浏览器兼容性问题及解决方案 BigBird2012 JavaScript
不论是网站应用还是学习js,大家很注重ie与firefox等浏览器的兼容性问题，毕竟这两中浏览器是占了绝大多数。一、document.formName.item(”itemName”) 问题问题说明：IE下，可以使用 document.formName.item(”itemName”) 或 document.formName.elements ["elementName&quo
JUnit-4.11使用报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing错误 bijian1013 junit4.11 单元测试
下载了最新的JUnit版本，是4.11，结果尝试使用发现总是报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing这样的错误，上网查了一下，一般的解决方案是，换一个低一点的版本就好了。还有人说，是缺少hamcrest的包。去官网看了一下，如下发现：
[Zookeeper学习笔记之二]Zookeeper部署脚本 bit1129 zookeeper
Zookeeper伪分布式安装脚本(此脚本在一台机器上创建Zookeeper三个进程，即创建具有三个节点的Zookeeper集群。这个脚本和zookeeper的tar包放在同一个目录下，脚本中指定的名字是zookeeper的3.4.6版本，需要根据实际情况修改)： #!/bin/bash #!!!Change the name!!! #The zookeepe
【Spark八十】Spark RDD API二 bit1129 spark
coGroup package spark.examples.rddapi import org.apache.spark.{SparkConf, SparkContext} import org.apache.spark.SparkContext._ object CoGroupTest_05 { def main(args: Array[String]) { v
Linux中编译apache服务器modules文件夹缺少模块(.so)的问题 ronin47 modules
在modules目录中只有httpd.exp，那些so文件呢？我尝试在fedora core 3中安装apache 2. 当我解压了apache 2.0.54后使用configure工具并且加入了 --enable-so 或者 --enable-modules=so (两个我都试过了) 去make并且make install了。我希望在/apache2/modules/目录里有各种模块，
Java基础-克隆 BrokenDreams java基础
Java中怎么拷贝一个对象呢？可以通过调用这个对象类型的构造器构造一个新对象，然后将要拷贝对象的属性设置到新对象里面。Java中也有另一种不通过构造器来拷贝对象的方式，这种方式称为克隆。 Java提供了java.lang.
读《研磨设计模式》-代码笔记-适配器模式-Adapter bylijinnan java 设计模式
声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ package design.pattern; /* * 适配器模式解决的主要问题是，现有的方法接口与客户要求的方法接口不一致 * 可以这样想，我们要写这样一个类（Adapter）: * 1.这个类要符合客户的要求 ---> 那显然要
HDR图像PS教程集锦&心得 cherishLC PS
HDR是指高动态范围的图像，主要原理为提高图像的局部对比度。软件有photomatix和nik hdr efex。一、教程叶明在知乎上的回答： http://www.zhihu.com/question/27418267/answer/37317792 大意是修完后直方图最好是等值直方图，方法是HDR软件调一遍，再结合不透明度和蒙版细调。二、心得 1、去除阴影部分的
maven-3.3.3 mvn archetype 列表 crabdave ArcheType
maven-3.3.3 mvn archetype 列表可以参考最新的：http://repo1.maven.org/maven2/archetype-catalog.xml [INFO] Scanning for projects... [INFO]
linux shell 中文件编码查看及转换方法 daizj shell 中文乱码 vim 文件编码
一、查看文件编码。在打开文件的时候输入:set fileencoding 即可显示文件编码格式。二、文件编码转换 1、在Vim中直接进行转换文件编码,比如将一个文件转换成utf-8格式 &
MySQL--binlog日志恢复数据 dcj3sjt126com binlog
恢复数据的重要命令如下 mysql> flush logs; 默认的日志是mysql-bin.000001，现在刷新了重新开启一个就多了一个mysql-bin.000002
数据库中数据表数据迁移方法 dcj3sjt126com sql
刚开始想想好像挺麻烦的，后来找到一种方法了，就SQL中的 INSERT 语句，不过内容是现从另外的表中查出来的，其实就是 MySQL中INSERT INTO SELECT的使用下面看看如何使用语法：MySQL中INSERT INTO SELECT的使用 1. 语法介绍有三张表a、b、c，现在需要从表b
Java反转字符串 dyy_gusi java 反转字符串
前几天看见一篇文章，说使用Java能用几种方式反转一个字符串。首先要明白什么叫反转字符串，就是将一个字符串到过来啦，比如"倒过来念的是小狗"反转过来就是”狗小是的念来过倒“。接下来就把自己能想到的所有方式记录下来了。 1、第一个念头就是直接使用String类的反转方法，对不起，这样是不行的，因为Stri
UI设计中我们为什么需要设计动效 gcq511120594 UI linux
随着国际大品牌苹果和谷歌的引领，最近越来越多的国内公司开始关注动效设计了，越来越多的团队已经意识到动效在产品用户体验中的重要性了，更多的UI设计师们也开始投身动效设计领域。但是说到底，我们到底为什么需要动效设计？或者说我们到底需要什么样的动效？做动效设计也有段时间了，于是尝试用一些案例，从产品本身出发来说说我所思考的动效设计。一、加强体验舒适度嗯，就是让用户更加爽更加爽的用
JBOSS服务部署端口冲突问题 HogwartsRow java 应用服务器 jboss server EJB3
服务端口冲突问题的解决方法，一般修改如下三个文件中的部分端口就可以了。 1、jboss5/server/default/conf/bindingservice.beans/META-INF/bindings-jboss-beans.xml 2、./server/default/deploy/jbossweb.sar/server.xml 3、.
第三章 Redis/SSDB+Twemproxy安装与使用 jinnianshilongnian ssdb reids twemproxy
目前对于互联网公司不使用Redis的很少，Redis不仅仅可以作为key-value缓存，而且提供了丰富的数据结果如set、list、map等，可以实现很多复杂的功能；但是Redis本身主要用作内存缓存，不适合做持久化存储，因此目前有如SSDB、ARDB等，还有如京东的JIMDB，它们都支持Redis协议，可以支持Redis客户端直接访问；而这些持久化存储大多数使用了如LevelDB、RocksD
ZooKeeper原理及使用 liyonghui160com
ZooKeeper是Hadoop Ecosystem中非常重要的组件，它的主要功能是为分布式系统提供一致性协调(Coordination)服务，与之对应的Google的类似服务叫Chubby。今天这篇文章分为三个部分来介绍ZooKeeper，第一部分介绍ZooKeeper的基本原理，第二部分介绍ZooKeeper
程序员解决问题的60个策略 pda158 框架工作单元测试
根本的指导方针 1. 首先写代码的时候最好不要有缺陷。最好的修复方法就是让 bug 胎死腹中。良好的单元测试强制数据库约束使用输入验证框架避免未实现的“else”条件在应用到主程序之前知道如何在孤立的情况下使用日志 2. print 语句。往往额外输出个一两行将有助于隔离问题。 3. 切换至详细的日志记录。详细的日
Create the Google Play Account sillycat Google
Create the Google Play Account Having a Google account, pay 25$, then you get your google developer account. References: http://developer.android.com/distribute/googleplay/start.html https://p
JSP三大指令 vikingwei jsp
JSP三大指令一个jsp页面中，可以有0~N个指令的定义！ 1. page --> 最复杂：<%@page language="java" info="xxx"...%> * pageEncoding和contentType： > pageEncoding：它