React

一、React基础知识点

1.React基本使用

React的安装

npm i react react-dom

• react 包是核心，提供创建元素，组件等功能
• react-dom 包提供DOM相关功能

React的使用

• 引入react和react-dom的两个js文件

<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

• 创建React元素

// 创建元素节点
// 1. 参数1：元素名称
// 2. 参数2：元素属性 传递的是个对象
// 3. 第三个及其以后的参数：元素内容
let title = React.createElement('li', null, 'hellow react');
//let title = React.createElement('li', {title='标题',id='10'}, 'hellow react');

• 渲染到页面

// 渲染到页面
ReactDOM.render(title, root)

2.React脚手架（★★★）

*1.使用React脚手架初始化项目

• 初始化项目，命令： npx create-react-app my-pro(出现’Happy hacking’初始化成功)
  • npx 目的：提升包内提供的命令行工具的使用体验
  • 原来：先安装脚手架包，再使用这个包中提供的命令
  • 现在：无需安装脚手架包，就可以直接使用这个包提供的命令
  • create-react-app 这个是脚手架名称 不能随意更改
  • my-pro 自己定义的项目名称
• 启动项目，在项目根目录执行命令： npm start(yarn start)

2.脚手架中使用React

• 导入react和react-dom两个包

import React from 'react'
import ReactDOM from 'react-dom'

• 创建元素

let h1 = React.createElement('h1',null,'我是标题')

• 渲染到页面

ReactDOM.render(h1,document.getElementById('root'))

二、JSX的使用

JSX产生的原因

由于通过createElement()方法创建的React元素有一些问题，代码比较繁琐，结构不直观，无法一眼看出描述的结构，不优雅，用户体验不爽

JSX的概述

JSX是JavaScript XML 的简写，表示在JavaScript代码中写HTML格式的代码

优势：声明式语法更加直观，与HTML结构相同，降低了学习成本，提升开发效率

1.简单入门使用（★★★）

使用步骤

• 使用JSX语法创建react元素

let h1 = <h1>我是通过JSX创建的元素</h1>

• 使用ReactDOM来渲染元素

ReactDOM.render(h1,document.getElementById('root'))

为什么在脚手架中可以使用JSX语法

• JSX 不是标准的ECMAScript语法，它是ECMAScript的语法拓展
• 需要使用babel编译处理后，才能在浏览器环境中使用
• create-react-app脚手架中已经默认有该配置，无需手动配置
• 编译JSX语法的包： @bable/preset-react

注意点

• React元素的属性名使用驼峰命名法
• 特殊属性名：class -> className，for -> htmlFor，tabindex -> tabIndex
• 如果没有子节点的React元素可以用 /> 来结束
• 推荐：使用 小括号包裹JSX，从而避免JS中自动插入分号报错

2.JSX语法（★★★）

JSX是来描述页面的结构，我们一般在编写业务逻辑渲染页面的时候，需要涉及到传递值，调用函数，判断条件，循环等，这一些在JSX中都能得到支持

嵌入JS表达式

语法：{JavaScritp表达式}

例子：

let content = '插入的内容'
let h1 = <h1>我是通过JSX创建的元素+ {content}</h1>

注意点

• 只要是合法的js表达式都可以进行嵌入
• JSX自身也是js表达式
• 注意：js中的对象是一个例外，一般只会出现在style属性中
• 注意：在{}中不能出现语句

条件渲染

根据不同的条件来渲染不同的JSX结构

let isLoading = true
let loading = ()=>{
    if(isLoading){
        return <div>Loading...</div>
    }
    return <div>加载完成</div>
}

可以发现，写JSX的条件渲染与我们之前编写代码的逻辑是差不多的，根据不同的判断逻辑，返回不同的 JSX结构，然后渲染到页面中

列表渲染

• 如果需要渲染一组数据，我们应该使用数组的 map () 方法
• 注意：渲染列表的时候需要添加key属性，key属性的值要保证唯一
• 原则：map()遍历谁，就给谁添加key属性
• 注意：尽量避免使用索引号作为key

const arr = [{
    id:1,
    name:'三国演义'
},{
    id:2,
    name:'水浒传'
},{
    id:3,
    name:'西游记'
},{
    id:4,
    name:'红楼梦'
}]
const ul = (<ul>
    {arr.map(item => <li key={item.id}>{item.name}</li>)}
</ul>)
ReactDOM.render(ul,document.getElementById('root'))

样式处理

1). 行内样式 -style

在style里面我们通过对象的方式传递数据

<li key={item.id} style={{'color': 'red',"backgroundColor": 'pink'}}>{item.name}</li>

这种方式比较的麻烦，不方便进行阅读，而且还会导致代码比较的繁琐

2). 类名 -className

创建CSS文件编写样式代码

.container {
    text-align: center
}

在js中进行引入，然后设置类名即可

import './css/index.css'
<li className='container' key={item.id} style={{'color': 'red',"backgroundColor": 'pink'}}>{item.name}</li>

三、React组件

1.组件的创建方式

函数创建组件

• 函数组件：使用JS的函数创建组件
• **约定1：**函数名称必须以大写字母开头
• **约定2：**函数组件必须有返回值，表示该组件的结构
• 如果返回值为null，表示不渲染任何内容

编写函数组件

function Hello() {
    return (
        <div>这是第一个函数组件</div>
    )
}

利用ReactDOM.render()进行渲染

ReactDOM.render(<Hello />,document.getElementById('root'))

类组件（★★★）

• 使用ES6语法的class创建的组件
• 约定1：类名称也必须要大写字母开头
• 约定2：类组件应该继承React.Component父类，从而可以使用父类中提供的方法或者属性
• 约定3：类组件必须提供 render 方法
• 约定4：render方法中必须要有return返回值

创建class类，继承React.Component，在里面提供render方法，在return里面返回内容

class Hello extends React.Component{
    render(){
        return (
            <div>这是第一个类组件</div>
        )
    }
}

通过ReactDOM进行渲染

ReactDOM.render(<Hello />,document.getElementById('root'))

抽离成单独的JS文件（★★★）

• 思考：项目中组件多了之后，该如何组织这些组件？
• 选择一：将所有的组件放在同一个JS文件中
• 选择二：将每个组件放到单独的JS文件中
• 组件作为一个独立的个体，一般都会放到一个单独的JS文件中

示例demo

• 创建Hello.js
• 在Hello.js 中导入React，创建组件，在Hello.js中导出

import React from 'react'

export default class extends React.Component {
    render(){
        return (
            <div>单独抽离出来的 Hello</div>
        )
    }
}

• 在index.js中导入Hello组件，渲染到页面

import Hello from './js/Hello'
ReactDOM.render(<Hello />,document.getElementById('root'))

2.React事件处理（★★★）

事件绑定

• React事件绑定语法与DOM事件语法相似
• 语法：on+事件名称=事件处理函数，比如 onClick = function(){}
• 注意：React事件采用驼峰命名法

示例demo

export default class extends React.Component {
    clickHandle = (e) => {
        console.log('点了')
    }
    render(){
        return (
            <div><button onClick = {this.clickHandle}>点我点我点我</button></div>
        )
    }
}

小结

• 在React中绑定事件与原生很类似
• 需要注意点在于，在React绑定事件需要遵循驼峰命名法
• 类组件与函数组件绑定事件是差不多的，只是在类组件中绑定事件函数的时候需要用到this，代表指向当前的类的引用，在函数中不需要调用this

事件对象

• 可以通过事件处理函数的参数获取到事件对象
• React中的事件对象叫做：合成事件
• 合成事件：兼容所有浏览器，无需担心跨浏览器兼容问题
• 除兼容所有浏览器外，它还拥有和浏览器原生事件相同的接口，包括 stopPropagation()和 preventDefault()
• 如果你想获取到原生事件对象，可以通过 nativeEvent 属性来进行获取

export default class extends React.Component {
    clickHandle = (e) => {
        // 获取原生事件对象
        console.log(e.nativeEvent)
    }
    render(){
        return (
            <div><button onClick = {this.clickHandle}>点我点我点我</button></div>
        )
    }
}

有状态组件和无状态组件

• 函数组件又叫做 无状态组件，类组件又叫做 有状态组件
• 状态(state) 即数据
• 函数组件没有自己的状态，只负责数据展示
• 类组件有自己的状态，负责更新UI，让页面动起来

3.React事件传参（★★★）

1.写法一（★★★）

//事件对象作为第二个参数传递
<Button onClick={ (e)=>this.delFolder("abc",e)}></Button>

delFolder = (name,e)=>{
    console.log(name);
    console.log(e);   
}

2.写法二

//用bind绑定，作用是作为第二个参数传递，不用显示传递事件对象，定义方法时，事件对象作为最后一个参数传入

<Button onClick={this.delFolder.bind(this,"abc")}></Button>
delFolder = (name,e)=>{
	alert(name)
}

3.写法三

//返回一个函数，事件对象在返回的函数中

<Button onClick={this.delFolder("abc")}></Button>
delFolder = (name)=>{
	return (e)=>{
    	console.log(e);
    	console.log(name);
	}
}

4.State和SetState（★★★）

1.state基本使用

• 状态(state)即数据，是组件内部的私有数据，只能在组件内部使用
• state的值是对象，表示一个组件中可以有多个数据
• 通过this.state来获取状态

export default class extends React.Component {
    constructor(){
        super()

        // 第一种初始化方式
        this.state = {
            count : 0
        }
    }
    // 第二种初始化方式
    state = {
        count:1
    }
    render(){
        return (
            <div>计数器 :{this.state.count}</div>
        )
    }
}

2.setState() 修改状态

• 状态是可变的
• 语法：this.setState({要修改的数据})
• 注意：不要直接修改state中的值，这是错误的
• setState() 作用：1.修改 state 2.更新UI
• 思想：数据驱动视图

export default class extends React.Component {
    // 第二种初始化方式
    state = {
        count:1
    }
    render(){
        return (
            <div>
                <div>计数器 :{this.state.count}</div>
                <button onClick={() => {
                     this.setState({
            	 		count: this.state.count+1
           			  })   
                }}>+1</button>
            </div>
        )
    }
}



//扩展 修改state中对象的某个值
//1.es6的解构赋值
handlepagenum = (num,size) => {
    const queryInfo = {...this.state.queryInfo };
    queryInfo.pagenum = num;
    this.setState(() => {
        return {
            queryInfo:queryInfo
        }
    },() => {
        this.getUserList();
    });
}
//2.Object.assign
handlepagesize = (num,size) => {
    const queryInfo = Object.assign({}, this.state.queryInfo, { pagenum: 1,pagesize: size })
    this.setState(() => {
        return {
            queryInfo:queryInfo
        }
    },() => {
         this.getUserList();
    });
 }

小结

• 修改state里面的值我们需要通过 this.setState() 来进行修改
• React底层会有监听，一旦我们调用了setState导致了数据的变化，就会重新调用一次render方法，重新渲染当前组件

5.抽取事件处理函数

• 当我们把上面代码的事件处理程序抽取出来后，会报错，找不到this

原因

• 在JSX中我们写的事件处理函数可以找到this，原因在于在JSX中我们利用箭头函数，箭头函数是不会绑定this，所以会向外一层去寻找，外层是render方法，在render方法里面的this刚好指向的是当前实例对象

6.事件绑定this指向

• 利用箭头函数自身不绑定this的特点

• 利用bind方法（★★★）

  利用原型bind方法是可以更改函数里面this的指向的，所以我们可以在构造中调用bind方法，然后把返回的值赋值给我们的函数即可

  class App extends React.Component {
    constructor() {
      super()
  	...
      // 通过bind方法改变了当前函数中this的指向
      this.onIncrement = this.onIncrement.bind(this)
    }
    // 事件处理程序
    onIncrement() {
      ...
    }
  
    render() {
      ...
    }
  }
  

• class的实例方法（★★★）

  • 利用箭头函数形式的class实例方法
  • 注意：该语法是实验性语法，但是，由于babel的存在可以使用

    // 事件处理程序
    onIncrement = () => {
      console.log('事件处理程序中的this：', this)
      this.setState({
        count: this.state.count + 1
      })
    }
  

7.表单处理

受控组件（★★★）

• HTML中的表单元素是可输入的，也就是有自己的可变状态
• 而React中可变状态通常保存在state中，并且只能通过setState() 方法来修改
• React讲state与表单元素值value绑定在一起，有state的值来控制表单元素的值
• 受控组件：值受到react控制的表单元素

<body>
    <div id="example"></div>
    <script type="text/babel">
        class Clock extends React.Component {
            constructor(props) {
                super(props)
                this.state = {
                    comments: [
                        { id: 1, name: 'jack', content: '沙发！！！' },
                        { id: 2, name: 'rose', content: '板凳~' },
                        { id: 3, name: 'tom', content: '楼主好人' }
                    ],
                    userName: '',
                    userContent: ''
                }
            };
            handleForm = (e) => {
                this.setState({
                    [e.target.name] : e.target.value//通过 [name] 来修改对应的state
                })
            };
            handleClick = () => {
                const {userName,userContent} = this.state;
                if (userName.trim() === '' || userContent.trim() === '') {
                    alert("请输入内容")
                    return
                }
                const newComment = [{
                    id: this.state.comments.length+1,
                    name: userName,
                    content: userContent
                },...this.state.comments]
                this.setState({
                    comments: newComment,
                    userName: '',
                    userContent: ''
                })
            };
            renderList() {
                if(this.state.comments.length === 0) {
                    return(
                        <div className="no-comment">暂无评论，快来评论吧</div>
                    )
                }else {
                    return(
                        <ul>{
                            this.state.comments.map((item) => {
                                return(
                                    <li key={item.id}>
                                        <h3>{item.name}</h3>
                                        <p>{item.content}</p>    
                                    </li>
                                )
                            })
                        }</ul>
                    )
                }
            }
            render() {
                return (
                    <div className="app">
                        <div>
                            <input type="text" 
                                className="user"
                                name="userName"
                                value={this.state.userName}
                                placeholder="请输入评论人"
                                onChange={this.handleForm}
                            />
                            <br />
                            <textarea name="userContent" 
                                cols="30" rows="10" 
                                className="content"
                                value={this.state.userContent}
                                placeholder="请输入评论内容"
                                onChange={this.handleForm}
                            />
                            <br />
                            <button onClick={this.handleClick}>发表评论</button>
                        </div>
                        {this.renderList()}
                    </div>
                )
            }
        }
        ReactDOM.render(
            <Clock />,
            document.getElementById('example')
        );
    </script>

</body>
<style>
    .app {
        width: 300px;
        padding: 10px;
        border: 1px solid #999;
    }

    .user {
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 10px;
    }

    .content {
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 10px;
    }

    .no-comment {
        text-align: center;
        margin-top: 30px;
    }
</style>

非受控组件 （了解）

• 说明：借助于ref，使用元素DOM方式获取表单元素值
• ref的作用：获取DOM或者组件

class MyComponent extends React.Component {
  handleClick() {
    // 使用原生的 DOM API 获取焦点
    this.refs.myInput.focus();
  }
  render() {
    //  当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
    return (
      <div>
        <input type="text" ref="myInput" />
        <input
          type="button"
          value="点我输入框获取焦点"
          onClick={this.handleClick.bind(this)}
        />
      </div>
    );
  }
}
 
ReactDOM.render(
  <MyComponent />,
  document.getElementById('example')
);

四、React组件进阶

组件通讯介绍

组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据。在组件化过程中，我们将一个完整的功能拆分成多个组件，以更好的完成整个应用的功能。而在这个过程中，多个组件之间不可避免的要共享某些数据。为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通，这个过程就是组件通讯

1.组件的props（★★★）

基本使用

• 组件时封闭的，要接受外部数据应该通过props来实现

• props的作用：接收传递给组件的数据

• 传递数据：给组件标签添加属性

  <Hello name="jack" age={19} />
  

• 接收数据：函数组件通过 参数 props接收数据，类组件通过 this.props接收数据

  • 函数组件获取

    function Hello(props) {
        console.log(props)
        return (
        	<div>接收的数据：{props.name} </div>
        )
    }
    

  • 类组件获取

    class Hello extends React.Component {
        render() {
            return (
            	<div>接收的数据：{this.props.name} </div>
            )
        }
    }
    

特点

• 可以给组件传递任意类型的数据

• props是只读属性，不能对值进行修改

• 注意：使用类组件时，如果写了构造函数，应该将props传递给super()，否则，无法在构造函数中获取到props，其他的地方是可以拿到的

  class Hello extends React.Component {
      constructor(props) {
          super(props)
      }
      render() {
          return (
          	<div>接收的数据：{this.props.name} </div>
          )
      }
  }
  

2.组件通讯的三种方式（★★★）

2.1父组件传递数据给子组件

• 父组件提供要传递的state数据

• 给子组件标签添加属性，值为state中的数据

• 子组件中通过props接收父组件中传递的数据

  class Parent extends React.Component {
      state = {lastName: '张三'};
  	render() {
      	return (
          	<div>
          		传递数据给子组件：<Child name = {this.state.lastName} />
          	</div>
          )
  	}
  }
  
  function Child(props) {
      return(
      	<div>子组件接收到数据：{props.name}</div>
      )
  }
  

2.2子组件传递数据给父组件

• 利用回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数

• 父组件提供一个回调函数，用来接收数据

• 将该函数作为属性的值，传递给子组件

  class Parent extends React.Component {
      state = {
          parentMsg: ''
      }
      //提供回调函数
      getChildMsg = (msg) => {
          console.log('接收到子组件数据'，msg)
          this.setState({
              parentMsg: msg
          })
      }
      render() {
      	return (
          	<div>
                   父组件: {this.state.parentMsg}
          		子组件：<Child getMsg = {this.getChildMsg} />
          	</div>
          )
  	}
  }
  

• 子组件通过props调用回调函数

  class Child extends React.Component {
  	state = {childMsg: 'react'}
      handleClick = () => {
          this.props.getMsg(this.state.childMsg)
      }
      render() {
      	return (
          	<button onClick={this.handleClick}>点我，给父组件传递数据</button>
          )
  	}
  }
  

2.3兄弟组件传递

• 将共享状态(数据)提升到最近的公共父组件中，由公共父组件管理这个状态
• 这个称为状态提升
• 公共父组件职责：1. 提供共享状态 2.提供操作共享状态的方法
• 要通讯的子组件只需要通过props接收状态或操作状态的方法

1.定义布局结构，一个Counter里面包含两个子组件，一个是计数器的提示，一个是按钮

class Counter extends React.Component {
    render() {
        return (
            <div>
            	<Child1 />
                <Child2 />
        	</div>
        )
    }
}
class Child1 extends React.Component {
    render() {
        return (
            <h1>计数器：</h1>
        )
    }
}
class Child2 extends React.Component {
    render() {
        return (
            <button>+1</button>
        )
    }
}

2.在父组件里定义共享状态，把这个状态传递给第一个子组件

class Counter extends React.Component {
    // 提供共享的状态
    state = {
        count: 0
    }
    render() {
        return (
            <div>
            	{/* 把状态提供给第一个子组件 */}
            	<Child1 count={this.state.count}/>
            	<Child2 />
        	</div>
        )
    }
}

3.在第一个子组件里面就能通过props获取到

class Child1 extends React.Component {
    render() {
        return (
            <h1>计数器：{this.props.count}</h1>
        )
    }
}

4.在父组件中提供共享方法，通过属性传递给第二个子组件，方便第二个子组件来进行调用

    // 提供共享方法
    onIncrement = (res) => {
        // 只要第二个子组件调用了这个函数，就会执行里面代码
        this.setState({
            count: this.state.count + res
        })
    }
    render() {
        return (<div>
            ...
            {/* 把共享方法提供给第二个子组件 */}
            <Child2 onIncrement={this.onIncrement} />
        </div>
        )
    }

5.在第二个子组件里面通过props来获取到对应函数，然后进行调用

class Child2 extends React.Component {
    handleClick = () => {
        // 这里一旦调用，就会执行父组件里面 onIncrement函数
        this.props.onIncrement(2)
    }
    render() {
        return (
            <button onClick={this.handleClick}>+</button>
        )
    }
}

3.Context（★★★）

如果出现层级比较多的情况下（例如：爷爷传递数据给孙子），我们会使用Context来进行传递

作用： 跨组件传递数据

使用步骤

• 调用 React.createContext() 创建 Provider(提供数据) 和 Consumer(消费数据) 两个组件

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

• 使用Provider 组件作为父节点

  <Provider>
  	<div className="App">
  		<Child />
  	</div>
  </Provider>
  

• 设置value属性，表示要传递的数据

  <Provider value = "pink">
  

• 哪一层想要接收数据，就用Consumer进行包裹，在里面回调函数中的参数就是传递过来的值

  <Consumer>
  	{data => <span>data参数表示接收到的数据 -- {data}</span>}
  </Consumer>
  

//创建context得到两个组件
const {Provider,Consumer} = React.createContext()

class App extends React.Component {
    render() {
        return (
        	<Provider value="pink">
				<div className="App">
					<Node />
				</div>
			</Provider>
        )
    }
}

class Node extends React.Component {
    render() {
        return (
        	<div className="node">
                <SubNode />
            </div>
        )
    }
}

class SubNode extends React.Component {
    render() {
        return (
        	<div className="subnode">
                <Child />
            </div>
        )
    }
}

class Child extends React.Component {
    render() {
        return (
        	<div className="child">
                <Consumer>
					{data => <span>data参数表示接收到的数据 -- {data}</span>}
				</Consumer>
            </div>
        )
    }
}

ReactDOM.render(
	<App />,document.getElementById('example')
);

4.props进阶

4.1children属性

• children属性： 表示组件标签的子节点，当组件标签有子节点时，props就会有该属性

• children属性与普通的props一样，值可以使任意值（文本、react元素、组件、甚至是函数）

  function Hello(props) {
      return (
      	<div>
      		组件的子节点：{props.children}
      	</div>
      )
  }
  <Hello>我是子节点</Hello>
  

4.2props校验（★★★）

• 对于组件来说，props是外来的，无法保证组件使用者传入什么格式的数据，简单来说就是组件调用者可能不知道组件封装着需要什么样的数据

• 如果传入的数据不对，可能会导致报错

• 关键问题：组件的使用者不知道需要传递什么样的数据

• props校验：允许在创建组件的时候，指定props的类型、格式等

  App.propTypes = {
      colors: PropTypes.array
  }
  

• 作用：捕获使用组件时因为props导致的错误，给出明确的错误提示，增加组件的健壮性

使用步骤

• 安装包 prop-types (yarn add prop-types | npm i props-types)

• 导入prop-types 包

• 使用组件名.propTypes={} 来给组件的props添加校验规则

• 校验规则通过PropTypes对象来指定

  import PropTypes from 'prop-types'
  function App(props) {
      return (
      	<h1>Hi,{props.colors}</h1>
      )
  }
  App.propTypes = {
      //约定colors属性为array类型
      //如果类型不对，则报出明确错误，便于分析错误原因
      colors: PropTypes.array
  }
  

常见的约束规则

• 创建的类型： array、bool、func、number、object、string

• React元素类型：element

• 必填项：isRequired

• 特定结构的对象： shape({})

• 更多的约束规则

  //常见类型
  optionalFunc: PropTypes.func,
  //必选
  requiredFunc: PropTypes.func.isRequired,
  //特定结构的对象
  optionalObjectWithShape: PropTypes.shape({
      color: PropTypes.string,
      fontSize:Proptypes.number
  })
  

4.3props的默认值

• 场景：分页组件 -> 每页显示条数

  function App(props) {
      return (
      	<div>
      		此处展示props的默认值：{props.pageSize}
      	</div>
      )
  }
  //设置默认值
  App.defaultProps = {
      pageSize: 10
  }
  //不传入pageSize属性
  <App />
  

五、组件生命周期（★★★）

概述

意义：组件的生命周期有助于理解组件的运行方式，完成更复杂的组件功能、分析组件错误原因等

组件的生命周期： 组件从被创建到挂载到页面中运行，再到组件不在时卸载的过程

生命周期的每个阶段总是伴随着一些方法调用，这些方法就是生命周期的钩子函数

构造函数的作用：为开发人员在不同阶段操作组件提供了实际

5.1创建时（挂载阶段）

• 执行时机：组件创建时（页面加载时）

钩子函数	触发时间	作用
constructor	创建组件时最先执行	1.初始化state2.为事件处理程序绑定this
render	每次组件渲染时都会触发	渲染UI(不能调用setState())
componentDidMount	组件挂载(完成DOM渲染)后	1.发送网络请求2.DOM操作

5.2更新时

执行时机：setState()、 forceUpdate()、 组件接收到新的props

说明：以上三者任意一种变化，组件就会重新渲染

钩子函数	触发时间	作用
render	每次组件渲染时都会触发	渲染UI(与挂载阶段是同一个render)
componentUpdate	组件更新(完成DOM渲染)后	1.发送网络请求 2.DOM操作 **注：**如果要setState(),必须放在一个if()条件中(比较更新前后的props是否相同，来决定是否重新渲染组件)

5.3卸载时

执行时机：组件从页面中消失

作用：用来做清理操作

钩子函数	触发时间	作用
componentWillUnmount	组件挂卸载(从页面中消失)	执行清理工作(比如清理定时器)

5.4不常用的钩子函数

getDerivedStateFromProps()

• getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容
• 不管原因是什么，都会在每次渲染前触发此方法

shouldComponentUpdate()

• 根据 shouldComponentUpdate() 的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。默认行为是 state 每次发生变化组件都会重新渲染
• 当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。返回值默认为 true

getSnapshotBeforeUpdate()

• getSnapshotBeforeUpdate() 在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给 componentDidUpdate()
• 此用法并不常见，但它可能出现在 UI 处理中，如需要以特殊方式处理滚动位置的聊天线程等

六、React组件复用概述

• render props模式
• 高阶组件（HOC）

6.1render-props模式 （★★★）

import React from 'react';
 class Mouse extends React.Component {
     constructor(props) {
         super(props)
         this.state = {
             x: 0,
             y: 0
         }
        //  console.log(props.children)
     }
     componentDidMount() {
         window.addEventListener('mousemove',this.handleMouseMove)
     }
     componentWillUnmount() {
         window.removeEventListener('mousemove',this.handleMouseMove)
     }
     handleMouseMove = (e) => {
        this.setState({
            x: e.clientX,
            y: e.clientY
        })
     }
     render() {
        // 向外界提供当前子组件里面的数据
        return this.props.render(this.state)
         
         //children代替render属性
         //注意：并不是该模式叫 render props就必须使用名为render的prop，实际上可以使用任意名称的prop
         //把prop是一个函数并且告诉组件要渲染什么内容的技术叫做： render props模式
         //推荐：使用childre代替render属性
         
        //return this.props.children(this.state)
     }
 }
 export default Mouse;

class App extends React.Component {
    render() {
        return (
            <div>
                <Mouse render={mouse => {
                    return <p>X{mouse.x}Y{mouse.y}</p>
                }}/>
                //<Mouse>{(mouse) => <p>p的位置是X{mouse.x}，Y{mouse.y}</p></Mouse>
            </div>
        )
    }
}
ReactDOM.render(<App />,document.getElementById('root'))

6.2高阶组件 （★★★）

• 高阶组件(HOC、Higher-Order Component) 是一个函数，接收要包装的组件，返回增强后的组件
• 高阶组件内部创建了一个类组件，在这个类组件中提供复用的状态逻辑代码，通过prop将复用的状态传递给被包装组件WrappedComponent

使用步骤

• 创建一个函数，名称约定以with开头
• 指定函数参数，参数应该以大写字母开头
• 在函数内部创建一个类组件，提供复用的状态逻辑代码，并返回
• 在该组件中，渲染参数组件，同时将状态通过prop传递给参数组件
• 调用该高阶组件，传入要增强的组件，通过返回值拿到增强后的组件，并将其渲染到页面

import React from 'react'
// 定义一个函数，在函数内部创建一个相应类组件
function withMouse(WrappedComponent) {
    // 该组件提供复用状态逻辑
    class Mouse extends React.Component {
        state = {
            x: 0,
            y: 0
        }
        // 事件的处理函数
        handleMouseMove = (e) => {
            this.setState({
                x: e.clientX,
                y: e.clientY
            })
        }
        // 当组件挂载的时候进行事件绑定
        componentDidMount() {
            window.addEventListener('mousemove', this.handleMouseMove)
        }
        // 当组件移除时候解绑事件
        componentWillUnmount() {
            window.removeEventListener('mousemove', this.handleMouseMove)
        }
        render() {
            // 在render函数里面返回传递过来的组件，把当前组件的状态设置进去
           	//传递props
            //问题：如果没有传递props，会导致props丢失问题
		   //解决方式： 渲染WrappedComponent时，将state和props一起传递给组件
		   //return <WrappedComponent {...this.state} />
            return <WrappedComponent {...this.state} {...this.props} />
        }
    }

	//设置displayName
	//使用高阶组件存在的问题：得到两个组件的名称相同
	//原因：默认情况下，React使用组件名称作为displayName
	//解决方式：为高阶组件设置displayName，便于调试时区分不同的组件
	//displayName的作用：用于设置调试信息(React Developer Tools信息)
	Mouse.displayName = `WithMouse${getDisplayName(WrappedComponent)}`
    return Mouse
}
function getDisplayName(WrappedComponent) {
  return WrappedComponent.displayName || WrappedComponent.name || 'Component'
}
export default withMouse;

import withMouse from './withMouse.js'
//哪个组件需要加强，通过调用withMouse这个函数，然后把返回的值设置到父组件中即可
function Position(props) {
    return (
        <p>
            X:{props.x}
            Y:{props.y}
        </p>
    )
}
// 把position 组件来进行包装
let MousePosition = withMouse(Position)

class App extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <div>
                高阶组件
                <MousePosition></MousePosition>
            </div>
        )
    }
}

七、React原理

7.1setState()说明 （★★★）

更新数据

• setState()更新数据是异步的
• 注意：使用该语法，后面的setState不要依赖前面setState的值
• 多次调用setState，只会触发一次render

推荐语法

• 推荐：使用 setState((state,props) => {}) 语法

• 参数state： 表示最新的state

• 参数props： 表示最新的props

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

• 第二个参数

  • 场景：在状态更新(页面完成重新渲染)后立即执行某个操作
  • 语法：setState(update[,callback])

  this.setState((state,props) => {
      return {
          count: state.count + 1
      }
  },
  () => {console.log("这个回调函数会在状态更新后立即执行")}
  )
  

7.2JSX语法的转化过程

• JSX仅仅是createElement() 方法的语法糖(简化语法)
• JSX语法被 @babel/preset-react 插件编译为createElement() 方法
• React 元素： 是一个对象，用来描述你希望在屏幕上看到的内容

//JSX语法
const element = (<h1 className="greeting">Hello JSX</h1>)

//createElement()
const element = React.createElement('h1',{className:'greeting'},'Hello JSX')

//React元素
//注意：这是简化过程
const element = {
    type: 'h1',
    props: {
        className: 'greeting',
        children: 'Hello JSX'
    }
}

7.3组件更新机制

• setState() 的两个作用
  • 修改state
  • 更新组件
• 过程：父组件重新渲染时，也会重新渲染子组件，但只会渲染当前组件子树（当前组件以其所有子组件）

7.4组件性能优化

1. 减轻state

   • 减轻state：只存储跟组件渲染相关的数据（比如：count/ 列表数据 /loading等）
   • 注意：不用做渲染的数据不要放在state中
   • 对于这种需要在多个方法中用到的数据，应该放到this中

   class Hello extends Component {
       componentDidMount() {
           //timerId存储到this中，而不是state中
           this.timerId = setInterval(() => {},2000)
       }
       componentWillUnmount() {
           clearInterval(this.timerId)
       }
       render() {...}
   }
   

2. 避免不必要的重新渲染

   • 组件更新机制：父组件更新会引起子组件也被更新，这种思路很清晰
   • 问题：子组件没有任何变化时也会重新渲染
   • 如果避免不必要的重新渲染？
   • 解决方式：使用钩子函数 shouldComponentUpdate(nextProps, nextState)
     • 在这个函数中，nextProps和nextState是最新的状态以及属性
   • 作用：这个函数有返回值，如果返回true，代表需要重新渲染，如果返回false，代表不需要重新渲染
   • 触发时机：更新阶段的钩子函数，组件重新渲染前执行(shouldComponentUpdate => render)

   利用nextState参数来判断当前组件是否需要更新

   import React from 'react'
   import ReactDOM from 'react-dom'
   
   /* 
     组件性能优化：
   */
   
   // 生成随机数
   class App extends React.Component {
     state = {
       number: 0
     }
   
     handleClick = () => {
       this.setState(() => {
         return {
           number: Math.floor(Math.random() * 3)
         }
       })
     }
   
     // 因为两次生成的随机数可能相同，如果相同，此时，不需要重新渲染
     shouldComponentUpdate(nextProps, nextState) {
       console.log('最新状态：', nextState, ', 当前状态：', this.state)
   
       return nextState.number !== this.state.number
   
       // if (nextState.number !== this.state.number) {
       //   return true
       // }
       // return false
   
       // if (nextState.number === this.state.number) {
       //   return false
       // }
       // return true
     }
   
     render() {
       console.log('render')
       return (
         <div>
           <h1>随机数：{this.state.number}</h1>
           <button onClick={this.handleClick}>重新生成</button>
         </div>
       )
     }
   }
   ReactDOM.render(<App />, document.getElementById('root'))
   

   利用props参数来判断是否需要进行更新

   class App extends React.Component {
       state = {
           number: 0
       }
       // 点击事件，每次点击生成一个随机数
       hanldeBtn = () => {
           this.setState({
               number: Math.floor(Math.random() * 3)
           })
       }
   
       render() {
           return (
               <div>
                   <NumberBox number={this.state.number} />
                   <button onClick={this.hanldeBtn}>生成随机数</button>
               </div>
           )
       }
   }
   class NumberBox extends React.Component {
       // 将要更新UI的时候会执行这个钩子函数
       shouldComponentUpdate(nextProps, nextState) {
           // 判断一下当前生成的 值是否与页面的值相等
           if (nextProps.number !== this.props.number) {
               return true
           }
           return false
       }
       render() {
           return (
               <h1>随机数：{this.props.number} </h1>
           )
       }
   }
   

7.5纯组件

• 纯组件： PureComponent 与 React.Component 功能相似
• 区别： PureComponent 内部自动实现了 shouldComponentUpdate钩子，不需要手动比较
• 原理：纯组件内部通过分别比对前后两次 props和state的值，来决定是否重新渲染组件

import React from 'react'
import ReactDOM from 'react-dom'

/* 
  组件性能优化：
*/

// 生成随机数
class App extends React.Component {
  state = {
    number: 0
  }

  handleClick = () => {
    this.setState(() => {
      return {
        number: Math.floor(Math.random() * 3)
      }
    })
  }

  render() {
    return (
      <div>
        <NumberBox number={this.state.number} />
        <button onClick={this.handleClick}>重新生成</button>
      </div>
    )
  }
}

class NumberBox extends React.PureComponent {
  render() {
    console.log('子组件中的render')
    return <h1>随机数：{this.props.number}</h1>
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

import React from 'react'
import ReactDOM from 'react-dom'

/* 
  组件性能优化：
*/

// 生成随机数
class App extends React.PureComponent {
  state = {
    number: 0
  }

  handleClick = () => {
    this.setState(() => {
      return {
        number: Math.floor(Math.random() * 3)
      }
    })
  }

  render() {
    console.log('父组件中的render')
    return (
      <div>
        <h1>随机数：{this.state.number}</h1>
        <button onClick={this.handleClick}>重新生成</button>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

• 引用类型：只比对对象的引用地址是否相同
• 注意：state 或 props 中属性值为引用类型时，应该创建新数据，不要直接修改原数据

import React from 'react'
import ReactDOM from 'react-dom'

/* 
  组件性能优化：
*/

// 引用类型：
const obj = { number: 0 }
const newObj = obj
newObj.number = 2
console.log(newObj === obj) // true

// 生成随机数
class App extends React.PureComponent {
  state = {
    obj: {
      number: 0
    }
  }

  handleClick = () => {
    // 正确做法：创建新对象
    // 不要用数组的push/unshift等直接修改当前数组的方法
    // 应该使用concat或slice等这些返回新数组的方法
    const newObj = { ...this.state.obj, number: Math.floor(Math.random() * 3) }
    this.setState(() => {
      return {
        obj: newObj
      }
    })

    // 错误演示：直接修改原始对象中属性的值
    /* const newObj = this.state.obj
    newObj.number = Math.floor(Math.random() * 3)

    this.setState(() => {
      return {
        obj: newObj
      }
    }) */
  }

  render() {
    console.log('父组件重新render')
    return (
      <div>
        <h1>随机数：{this.state.obj.number}</h1>
        <button onClick={this.handleClick}>重新生成</button>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

7.6虚拟DOM和Diff算法

Diff算法

执行过程

• 初次渲染时，React会根据初始化的state（model），创建一个虚拟DOM对象（树）
• 根据虚拟DOM生成真正的DOM，渲染到页面
• 当数据变化后(setState())，会重新根据新的数据，创建新的虚拟DOM对象（树）
• 与上一次得到的虚拟DOM对象，使用Diff算法比对（找不同），得到需要更新的内容
• 最终，React只将变化的内容更新（patch）到DOM中，重新渲染到页面

八、React路由

基本使用

使用步骤

• 安装： yarn add react-router-dom

  • 如果没有安装yarn工具的，需要先全局安装一下yarn：npm install -g yarn

• 导入路由的三个核心组件： Router / Route / Link

  import {BrowserRouter as Router, Route, Link} from 'react-router-dom'
  

• 使用Router 组件包裹整个应用

• 使用Link组件作为导航菜单（路由入口）

• 使用Route组件配置路由规则和要展示的组件（路由出口）

  import React from 'react'
  import ReactDOM from 'react-dom'
  /* 
    react-router-dom 的基本使用：
    1 安装： yarn add react-router-dom
  */
  // 2 导入组件：
  import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
  const First = () => <p>页面一的内容</p>
  // 3 使用Router组件包裹整个应用
  const App = () => (
    <Router>
      <div>
        <h1>React路由基础</h1>
        {/* 4 指定路由入口 */}
        <Link to="/first">页面一</Link>
  
        {/* 5 指定路由出口 */}
        <Route path="/first" component={First} />
      </div>
    </Router>
  )
  ReactDOM.render(<App />, document.getElementById('root'))
  

1.组件说明

• **Router组件：**包裹整个应用，一个React应用只需要使用一次
  • 两种常用的Router： HashRouter和BrowserRouter
  • HashRouter： 使用URL的哈希值实现 （localhost:3000/#/first）
  • 推荐 BrowserRouter：使用H5的history API实现（localhost3000/first）
• **Link组件：**用于指定导航链接（a标签）
  • 最终Link会编译成a标签，而to属性会被编译成 a标签的href属性
• **Route组件：**指定路由展示组件相关信息
  • path属性：路由规则，这里需要跟Link组件里面to属性的值一致
  • component属性：展示的组件
  • Route写在哪，渲染出来的组件就在哪

路由的执行过程

• 当我们点击Link组件的时候，修改了浏览器地址栏中的url
• React路由监听地址栏url的变化
• React路由内部遍历所有的Route组件，拿着Route里面path规则与pathname进行匹配
• 当路由规则（path）能够匹配地址栏中的pathname时，就展示该Route组件的内容

2.编程式导航

• **场景：**点击登陆按钮，登陆成功后，通过代码跳转到后台首页，如何实现？

• **编程式导航：**通过JS代码来实现页面跳转

• history是React路由提供的，用于获取浏览器历史记录的相关信息

• **push(path)：**跳转到某个页面，参数path表示要跳转的路径

• go(n)：前进或后退功能，参数n表示前进或后退页面数量

  import React from 'react'
  import ReactDOM from 'react-dom'
  
  /* 
    编程式导航
  */
  
  import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
  
  class Login extends React.Component {
    handleLogin = () => {
      // 使用编程式导航实现路由跳转
      // ...省略其他功能代码
      this.props.history.push('/home')
    }
    render() {
      return (
        <div>
          <p>登录页面：</p>
          <button onClick={this.handleLogin}>登录</button>
        </div>
      )
    }
  }
  
  const Home = props => {
    const handleBack = () => {
      // go(-1) 表示返回上一个页面
      props.history.go(-1)
    }
    return (
      <div>
        <h2>我是后台首页</h2>
        <button onClick={handleBack}>返回登录页面按钮</button>
      </div>
    )
  }
  
  const App = () => (
    <Router>
      <div>
        <h1>编程式导航：</h1>
        <Link to="/login">去登录页面</Link>
  
        <Route path="/login" component={Login} />
        <Route path="/home" component={Home} />
      </div>
    </Router>
  )
  ReactDOM.render(<App />, document.getElementById('root'))
  

3.默认路由

• 现在的路由都是通过点击导航菜单后展示的，如果进入页面的时候就主动触发路由呢
• 默认路由：表示进入页面时就会匹配的路由
• 默认路由：只需要把path设置为 '/'

4.匹配模式

模糊匹配模式

• 当Link组件的to属性值为 ‘/login’ 时候，为什么默认路由也被匹配成功？

• 默认情况下，React路由是模糊匹配模式

• 模糊匹配规则：只要pathname以path开头就会匹配成功

  path	能够匹配的pathname
  /	所有的pathname
  /first	/first或/first/a或/first/a/…

  import React from 'react'
  import ReactDOM from 'react-dom'
  
  /* 
    模糊匹配模式
  */
  
  import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
  
  const Home = () => <p>进入页面的时候，你能看到我吗？</p>
  const Login = () => <p>我是Login组件的内容</p>
  
  const App = () => (
    <Router>
      <div>
        <h1>默认路由</h1>
        <Link to="/">登录页面</Link>
        //<Link to="/first">登录页面</Link>
        //<Link to="/first/a/b/c">登录页面</Link>
          
        {/* 默认路由 */}
        <Route path="/" component={Home} />
        <Route path="/first" component={Login} />
      </div>
    </Router>
  )
  ReactDOM.render(<App />, document.getElementById('root'))
  

精准匹配

• 默认路由认可情况下都会展示，如果避免这种问题？

• 给Route组件添加exact属性，让其变为精准匹配模式

• 精确匹配：只有当path和pathname完全匹配时才会展示改路由

  import React from 'react'
  import ReactDOM from 'react-dom'
  
  /* 
    模糊匹配模式
  */
  
  import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
  
  const Home = () => <p>进入页面的时候，你能看到我吗？</p>
  const Login = () => <p>我是Login组件的内容</p>
  
  const App = () => (
    <Router>
      <div>
        <h1>默认路由</h1>
        <ul>
          <li>
            <Link to="/">首页</Link>
          </li>
          <li>
            <Link to="/login">登录页面</Link>
          </li>
        </ul>
        {/* 默认路由，添加 exact 属性，就会让当前路由变为精确匹配 */}
        <Route exact path="/" component={Home} />
        <Route path="/login" component={Login} />
      </div>
    </Router>
  )
  ReactDOM.render(<App />, document.getElementById('root'))
  

5.传值

1.动态路由传值(params)

• 传单个值

  //main.js
  import React from 'react';
  import {BrowserRouter as Router,Route,Link} from 'react-router-dom';
  import News from './News';
  
  class Main extends React.Component{
      constructor(props){
          super(props);
          this.state={
              id:66
          }
      }
      render(){
          return (
              <div>
                  <Router>
  					{/* 1. 固定传值 */}
                      <Link to="/news/1">News</Link>  
                      {/* 2. 拼接传值 */}
                      <Link to={'/news/'+this.state.id}>News</Link>  
                      {/* 3. ES6模板传值 */}
                      <Link to={`/news/${this.state.id}`}>News</Link>
                      <hr/>
                      <Route path="/news/:uid" component={News}></Route>
                  </Router>
              </div>
          )
      }
  }
  
  export default Main;
  

• 传多个值

  //main.js
  import React from 'react';
  import {BrowserRouter as Router,Route,Link} from 'react-router-dom';
  import News from './News';
  
  class Main extends React.Component{
      constructor(props){
          super(props);
          this.state={
              id:66,
              name:"易安"
          }
      }
      render(){
          return (
              <div>
                  <Router>
                  	<Link to={`/news/${this.state.id}/${this.state.name}`}>News</Link>
                      <hr/>
                      <Route path="/news/:uid/:uname" component={News}></Route>
                  </Router>
              </div>
          )
      }
  }
  
  export default Main;
  

  取值

  //News.js中取值
  import React from 'react';
  
  class News extends React.Component {
      componentDidMount(){
          console.log(this.props.match.params.uid);
          console.log(this.props.match.params.uname);
      }
      render() {
          return (
              <div>News</div>
          );
      }
  }
  
  export default News;
  

2.get 传值(相当于在路径上加 ?id=1)

• 路由的get传值，值在location的search，可以写算法进行解析，也可安装node的url模块进行解析。

  import React from 'react';
  import {BrowserRouter as Router,Route,Link} from 'react-router-dom';
  import My from './My';
  
  class Main extends React.Component{
      render(){
          return (
              <div>
                  <Router>
                  	<Link to="/my?id=6&name=ikun">My</Link>
                      <Route path="/my" component={My}></Route>
                  </Router>
              </div>
          )
      }
  }
  
  export default Main;
  

  取值

  • 算法解析

    //my.js
    import React from 'react';
    
    class My extends React.Component {
        componentDidMount(){
            let locurl=this.props.location.search;
            this.changeUrl(locurl);
        }
        changeUrl=(locurl)=>{
            let u=locurl.replace("?","");
            let ur=u.replace(/=/g,":").replace("&",",");
            console.log(ur.split(",")[0].split(":")[1]);
        }
        render() {
            return (
                <div>My</div>
            );
        }
    }
    
    export default My;
    

  • url模块解析

    //my.js
    import React from 'react';
    import url from 'url';
    
    class My extends React.Component {
        componentDidMount(){
            let locurl=this.props.location.search;
            let data=url.parse(locurl,true).query;
            console.log(data);
        }
        render() {
            return (
                <div>My</div>
            );
        }
    }
    
    export default My;
    

3.数组中的数据进行传值

动态路由传值+get传值：

//main.js
import React from 'react';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom';
import dyValue from './dyValue';
import getValue from './getValue';

class Main extends React.Component{
    constructor(props){
        super(props);
        this.state={
            arr:[
                {
                    aid:1,
                    title:"Vue"
                },
                {
                    aid:2,
                    title:"React"
                },
                {
                    aid:3,
                    title:"Node"
                }
            ]
        }
    }
    render(){
        return (
            <div>
                <Router>
                    <h3>动态路由传值</h3>
                    {
                        this.state.arr.map((value,index)=>{
                            return (
                                <li key={index}>
                                    <Link to={`/dyvalue/${value.aid}`}>{value.title}</Link>
                                </li>
                            )
                        })
                    }
                    <Route path="/dyvalue/:aid" component={dyValue}></Route>
                    <h3>get方式传值</h3>
                    {
                        this.state.arr.map((value,index)=>{
                            return (
                                <li key={index}>
                                    <Link to={`/getvalue?aid=${value.aid}`}>{value.title}</Link>
                                </li>
                            )
                        })
                    }
                    <Route path="/getvalue" component={getValue}></Route>
                </Router>
            </div>
        )
    }
}

export default Main;

在对应跳转页面参数值：

componentDidMount() {
	console.log(this.props.match.params.aid);   //动态路由取值
    console.log(this.props.location.search);  //get取值，取出来的是?aid=1这种格式，需手动转或引入url模块，进行路由解析
}

4.通过query

前提：必须由其他页面跳过来，参数才会被传递过来

注：不需要配置路由表。路由表中的内容照常：

<Route path='/sort' component={Sort}></Route>

1.Link处      
HTML方式
	<Link to={{ path : ' /sort ' , query : { name : 'sunny' }}}>
　　　　　　　　　　
JS方式
	this.props.router.push({ path : '/sort' ,query : { name: ' sunny'} })
 
2.sort页面     
	this.props.location.query.name

5.通过state

同query差不多，只是属性不一样，而且state传的参数是加密的，query传的参数是公开的，在地址栏

1.Link 处      
HTML方式：
	<Link to={{ path : ' /sort ' , state : { name : 'sunny' }}}> 
                                　　
JS方式：
	this.props.router.push({ pathname:'/sort',state:{name : 'sunny' } })
                              　　  
2.sort页面       
	this.props.location.state.name

九、React Hooks

    //类组件
    import React, { Component } from "react";
    
    export default class Button extends Component {
      constructor() {
        super();
        this.state = { buttonText: "Click me, please" };
        this.handleClick = this.handleClick.bind(this);
      }
      handleClick() {
        this.setState(() => {
          return { buttonText: "Thanks, been clicked!" };
        });
      }
      render() {
        const { buttonText } = this.state;
        return <button onClick={this.handleClick}>{buttonText}</button>;
      }
    }

React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来。

所有的钩子都是为函数引入外部功能，所以 React 约定，钩子一律使用use前缀命名，便于识别。你要使用 xxx 功能，钩子就命名为 usexxx。

1.useState()：状态钩子

useState()用于为函数组件引入状态（state）。纯函数不能有状态，所以把状态放在钩子里面。

本文前面那个组件类，用户点击按钮，会导致按钮的文字改变，文字取决于用户是否点击，这就是状态。使用useState()重写如下。

    import React, { useState } from "react";
    
    export default function  Button()  {
      const  [buttonText, setButtonText] =  useState("Click me,   please");
    
      function handleClick()  {
        return setButtonText("Thanks, been clicked!");
      }
        
      return  <button  onClick={handleClick}>{buttonText}</button>;
    }
    
    
    function App (props) {
    const [ count, setCount ] = useState(() => {
      console.log('useState default value function is call')
      return props.count || 0
    })
    return (
      <div>
        点击次数: { count } 
        <button onClick={() => { setCount((count => count + 1)}}>点我</button>
      </div>
      )
  }
//在使用 useState 的第二个参数时，想要获取上一轮该 state 的值的话，只需要在 useState 返回的第二个参数，也就是上面的例子中的 setCount 使用时，传入一个参数，该函数的参数就是上一轮的 state 的值

useState()这个函数接受状态的初始值，作为参数，上例的初始值为按钮的文字。该函数返回一个数组，数组的第一个成员是一个变量（上例是buttonText），指向状态的当前值。第二个成员是一个函数，用来更新状态，约定是set前缀加上状态的变量名（上例是setButtonText）。

2.useContext()：共享状态钩子

    import React, { useContext } from "react";
    
    const AppContext = React.createContext({});
    
    const Navbar = () => {
      const { username } = useContext(AppContext)
    
      return (
        <div className="navbar">
          <p>AwesomeSite</p>
          <p>{username}</p>
        </div>
      )
    }
    
    const Messages = () => {
      const { username } = useContext(AppContext)
    
      return (
        <div className="messages">
          <h1>Messages</h1>
          <p>1 message for {username}</p>
          <p className="message">useContext is awesome!</p>
        </div>
      )
    }
    
    function App() {
      return (
        <AppContext.Provider value={{
          username: 'superawesome'
        }}>
          <div className="App">
            <Navbar />
            <Messages />
          </div>
        </AppContext.Provider>
      );
    }
    
    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);

3.useReducer()：action 钩子

    //用法
    const [state, dispatch] = useReducer(reducer, initialState);

上面是useReducer()的基本用法，它接受 Reducer 函数和状态的初始值作为参数，返回一个数组。数组的第一个成员是状态的当前值，第二个成员是发送 action 的dispatch函数

    import React, { useReducer } from "react";
    
    const myReducer = (state, action) => {
      switch(action.type) {
        case('countUp'):
          return {
            ...state,
            count: state.count + 1
          }
        default:
          return state
      }
    }
    
    function App() {
      const [state, dispatch] = useReducer(myReducer, { count: 0 })
    
      return (
        <div className="App">
          <button onClick={() => dispatch({ type: 'countUp' })}>
            +1
          </button>
          <p>Count: {state.count}</p>
        </div>
      );
    }
    
    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);

由于 Hooks 可以提供共享状态和 Reducer 函数，所以它在这些方面可以取代 Redux。但是，它没法提供中间件（middleware）和时间旅行（time travel），如果你需要这两个功能，还是要用 Redux。

4.useEffect()：副作用钩子

useEffect()用来引入具有副作用的操作，最常见的就是向服务器请求数据。以前，放在componentDidMount里面的代码，现在可以放在useEffect()。

    //用法
    useEffect(()  =>  {
      // Async Action
    }, [dependencies])

上面用法中，useEffect()接受两个参数。第一个参数是一个函数，异步操作的代码放在里面。第二个参数是一个数组，用于给出 Effect 的依赖项，只要这个数组发生变化，useEffect()就会执行。第二个参数可以省略，这时每次组件渲染时，就会执行useEffect()

    import React, { useState, useEffect } from "react";
    
    const Person = ({ personId }) => {
      const [loading, setLoading] = useState(true);
      const [person, setPerson] = useState({});
    
      useEffect(() => {
        setLoading(true);
        fetch(`https://swapi.co/api/people/${personId}/`)
          .then(response => response.json())
          .then(data => {
            setPerson(data);
            setLoading(false);
          });
      }, [personId]);
    
      if (loading === true) {
        return <p>Loading ...</p>;
      }
    
      return (
        <div>
          <p>You're viewing: {person.name}</p>
          <p>Height: {person.height}</p>
          <p>Mass: {person.mass}</p>
        </div>
      );
    };
    
    function App() {
      const [show, setShow] = useState("1");
    
      return (
        <div className="App">
          <Person personId={show} />
          <div>
            Show:
            <button onClick={() => setShow("1")}>Luke</button>
            <button onClick={() => setShow("2")}>C-3PO</button>
          </div>
        </div>
      );
    }
    
    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);

5.创建自己的 Hooks

上例的 Hooks 代码还可以封装起来，变成一个自定义的 Hook，便于共享。

    import React, { useState, useEffect } from "react";
    
    //usePerson()就是一个自定义的 Hook。
    const usePerson = personId => {
      const [loading, setLoading] = useState(true);
      const [person, setPerson] = useState({});
      useEffect(() => {
        setLoading(true);
        fetch(`https://swapi.co/api/people/${personId}/`)
          .then(response => response.json())
          .then(data => {
            setPerson(data);
            setLoading(false);
          });
      }, [personId]);
      return [loading, person];
    };
    
    //Person 组件就改用这个新的钩子，引入封装的逻辑。
    const Person = ({ personId }) => {
      const [loading, person] = usePerson(personId);
    
      if (loading === true) {
        return <p>Loading ...</p>;
      }
    
      return (
        <div>
          <p>You're viewing: {person.name}</p>
          <p>Height: {person.height}</p>
          <p>Mass: {person.mass}</p>
        </div>
      );
    };
    
    function App() {
      const [show, setShow] = useState("1");
    
      return (
        <div className="App">
          <Person personId={show} />
          <div>
            Show:
            <button onClick={() => setShow("1")}>Luke</button>
            <button onClick={() => setShow("2")}>C-3PO</button>
          </div>
        </div>
      );
    }
    
    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);