react初识

react安装

直接下载使用

你也可以直接使用 BootCDN 的 React CDN 库，地址如下：
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

使用实例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

react.min.js - React 的核心库

react-dom.min.js - 提供与 DOM 相关的功能

babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和
babel-sublime包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。

使用 create-react-app 快速构建 React 开发环境

create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。
create-react-app 自动创建的项目是基于 Webpack + ES6 。
执行以下命令创建项目：

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

//项目目录
|____my-app
|____README.md
|____node_modules/
| |____package.json
|____.gitignore
|____public
| |____favicon.ico
| |____index.html
|____src
| |____App.css
| |____App.js
| |____App.test.js
| |____index.css
| |____index.js
| |____logo.svg

在浏览器中打开 http://localhost:3000/ ，即可显示

react组件的构建

React.createClass （ES5）

用React.creatClass构建组件是React最传统，也是兼容性最好的方法。

const List = React.createClass({
    getDefaultProps() {
        return {
            color : "#f00",
            text : "我是列表"
        }
    },

    render() {
        const {color,test} = this.props;
        return (
            <li className={`btn btn-${color}`}>{test}</li>
        )
    }
})

调用的时候只需要,每一次调用都会被编译成React.createElement(List)方法来创建List实例，这意味着每次调用就会创建一次li;

ES6 class

import React, {Component} from 'react';
class List extends Component {
    constructor(props) {
        super(props)
    }

    static defaultProps = {
        color : "#f00",
        text : "我是列表"
    };

    render() {
        const {color,test} = this.props;
        return (
            <li className={`btn btn-${color}`}>{test}</li>
        )
    }

}

无状态函数

function List({color="#f00",test="我是列表"}){
    return (
        <li className={`btn btn-${color}`}>{test}</li>
    )
}

1.无状态函数构建的组件称为无状态组件，这种构建方式是0.14版本后新增的，官方推崇.
2.在合适的情况下我们都应该使用这种组件方式。无状态组件不像上述两种方法在调用时会创建新实例，它创建时始终保持了一个实例，避免了不必要的检查和内存分配，做到了内存优化。

react生命周期

这里写图片描述
React 生命周期分为三种状态 1. 实例化 2.更新 3.销毁
实例化

当组件在客户端被实例化，第一次被创建时，以下方法依次被调用：
1. getDefaultProps 设置属性的默认值。 es6对应 deftaultProps
2. getInitialState 用来初始化每个实例的state。 es6 对应 constructor函数中的this.state
3. componentWillMount 渲染前
4. render 渲染
5. componentDidMount 渲染后

当组件在服务端被实例化，首次被创建时，以下方法依次被调用：
1、getDefaultProps
2、getInitialState
3、componentWillMount
4、render
componentDidMount 不会在服务端被渲染的过程中调用。

getDefaultProps
对于每个组件实例来讲，这个方法只会调用一次，该组件类的所有后续应用，getDefaultPops 将不会再被调用，其返回的对象可以用于设置默认的 props(properties的缩写) 值。

更新

6、componentWillReceiveProps(nextProps)
组件初始化时不调用，组件接受新的props时调用。
7、shouldComponentUpdate(nextProps, nextState)
react性能优化非常重要的一环。组件接受新的state或者props时调用，我们可以设置在此对比前后两个props和state是否相同，如果相同则返回false阻止更新，因为相同的属性状态一定会生成相同的dom树，这样就不需要创造新的dom树和旧的dom树进行diff算法对比，节省大量性能，尤其是在dom结构复杂的时候
8、componentWillUpdata(nextProps, nextState)
组件初始化时不调用，只有在组件将要更新时才调用，此时可以修改state
9、render()组件渲染
10、componentDidUpdate()
组件初始化时不调用，组件更新完成后调用，此时可以获取dom节点。

卸载

11、componentWillUnmount()
组件将要卸载时调用，一些事件监听和定时器需要在此时清除。

createClass和ES6的不同

ES6 class	createClass
static propTypes	propTypes
defaultProps	getDefaultProps
constructor (this.state)	getInitialState

React中使用原生事件

import React, { Component } form 'react';

class App extends Component {
    constructor () {
        super();
    }

    componentDidMount () {
        this.refs.button.addEventListener('click', e => {
            handleClick(e);
        })
    }

    handleClick (e) {
        console.log(e)
    }

    componentWillUnmount () {
        this.refs.button.removeEventListener('click')
    }

    render () {
        return (
            <button ref="button">按钮</button>
        )
    }
}

一定要注意在React中使用原生DOM事件时，一定要在组件卸载时手动移除，否则很可能出现内存泄漏的问题。2而使用合成事件系统时则不需要，因为React内部以及处理了。

组件间通信

父组件向子组件通信

这是最简单也是最常用的一种通信方式：父组件通过向子组件传递 props，子组件得到 props 后进行相应的处理。
下面是演示代码：
父组件 App.js：

import React,{ Component } from "react";
import Sub from "./SubComponent.js";
import "./App.css";

export default class App extends Component{
    render(){
        return(
            <div>
                <Sub title = "今年过节不收礼" />
            </div>
        )
    }
}

子组件 SubComponent.js：

import React from "react";

const Sub = (props) => {
    return(
        <h1>
            { props.title }
        </h1>
    )
}

export default Sub;

子组件向父组件通信

利用回调函数，可以实现子组件向父组件通信：父组件将一个函数作为 props 传递给子组件，子组件调用该回调函数，便可以向父组件通信。
下面是演示代码：
SubComponent.js：

import React from "react";

const Sub = (props) => {
    const cb = (msg) => {
        return () => {
            props.callback(msg)
        }
    }
    return(
        <div>
            <button onClick = { cb("我们通信把") }>点击我</button>
        </div>
    )
}

export default Sub;

App.js：

import React,{ Component } from "react";
import Sub from "./SubComponent.js";
import "./App.css";

export default class App extends Component{
    callback(msg){
        console.log(msg);
    }
    render(){
        return(
            <div>
                <Sub callback = { this.callback.bind(this) } />
            </div>
        )
    }
}

跨级组件之间通信

所谓跨级组件通信，就是父组件向子组件的子组件通信，向更深层的子组件通信。跨级组件通信可以采用下面两种方式：

 - 中间组件层层传递 props
 - 使用 context 对象

使用 context 是另一种可行的方式，context 相当于一个全局变量，是一个大容器，我们可以把要通信的内容放在这个容器中，这样一来，不管嵌套有多深，都可以随意取用。

使用 context 也很简单，需要满足两个条件：
- 上级组件要声明自己支持 context，并提供一个函数来返回相应的 context 对象
- 子组件要声明自己需要使用 context

下面以代码说明，我们新建 3 个文件：父组件 App.js，子组件 Sub.js，子组件的子组件 SubSub.js。
App.js：

import React, { Component } from 'react';
import PropTypes from "prop-types";
import Sub from "./Sub";
import "./App.css";

export default class App extends Component{
    // 父组件声明自己支持 context
    static childContextTypes = {
        color:PropTypes.string,
        callback:PropTypes.func,
    }

    // 父组件提供一个函数，用来返回相应的 context 对象
    getChildContext(){
        return{
            color:"red",
            callback:this.callback.bind(this)
        }
    }

    callback(msg){
        console.log(msg)
    }

    render(){
        return(
            <div>
                <Sub></Sub>
            </div>
        );
    }
}

Sub.js：

import React from "react";
import SubSub from "./SubSub";

const Sub = (props) =>{
    return(
        <div>
            <SubSub />
        </div>
    );
}

export default Sub;

SubSub.js：

import React,{ Component } from "react";
import PropTypes from "prop-types";

export default class SubSub extends Component{
    // 子组件声明自己需要使用 context
    static contextTypes = {
        color:PropTypes.string,
        callback:PropTypes.func,
    }
    render(){
        const style = { color:this.context.color }
        const cb = (msg) => {
            return () => {
                this.context.callback(msg);
            }
        }
        return(
            <div style = { style }>
                SUBSUB
                <button onClick = { cb("我胡汉三又回来了！") }>点击我</button>
            </div>
        );
    }
}

如果是父组件向子组件单向通信，可以使用变量，如果子组件想向父组件通信，同样可以由父组件提供一个回调函数，供子组件调用，回传参数。
在使用 context 时，有两点需要注意：

父组件需要声明自己支持 context，并提供 context 中属性的 PropTypes
子组件需要声明自己需要使用 context，并提供其需要使用的 context 属性的PropTypes
父组件需提供一个 getChildContext 函数，以返回一个初始的 context 对象
如果组件中使用构造函数（constructor），还需要在构造函数中传入第二个参数 context，并在 super 调用父类构造函数是传入 context，否则会造成组件中无法使用 context。

constructor(props,context){
  super(props,context);
}

改变 context 对象
我们不应该也不能直接改变 context 对象中的属性，要想改变 context 对象，只有让其和父组件的 state 或者 props 进行关联，在父组件的 state 或 props 变化时，会自动调用 getChildContext 方法，返回新的 context 对象，而后子组件进行相应的渲染。

修改 App.js，让 context 对象可变：

import React, { Component } from 'react';
import PropTypes from "prop-types";
import Sub from "./Sub";
import "./App.css";

export default class App extends Component{
    constructor(props) {
        super(props);
        this.state = {
            color:"red"
        };
    }
    // 父组件声明自己支持 context
    static childContextTypes = {
        color:PropTypes.string,
        callback:PropTypes.func,
    }

    // 父组件提供一个函数，用来返回相应的 context 对象
    getChildContext(){
        return{
            color:this.state.color,
            callback:this.callback.bind(this)
        }
    }

    // 在此回调中修改父组件的 state
    callback(color){
        this.setState({
            color,
        })
    }

    render(){
        return(
            <div>
                <Sub></Sub>
            </div>
        );
    }
}

此时，在子组件的 cb 方法中，传入相应的颜色参数，就可以改变 context 对象了，进而影响到子组件：

return(
    <div style = { style }>
        SUBSUB
        <button onClick = { cb("blue") }>点击我</button>
    </div>
);

context 同样可以应在无状态组件上，只需将 context 作为第二个参数传入：

import React,{ Component } from "react";
import PropTypes from "prop-types";

const SubSub = (props,context) => {
    const style = { color:context.color }
    const cb = (msg) => {
        return () => {
            context.callback(msg);
        }
    }

    return(
        <div style = { style }>
            SUBSUB
            <button onClick = { cb("我胡汉三又回来了！") }>点击我</button>
        </div>
    );
}

SubSub.contextTypes = {
    color:PropTypes.string,
    callback:PropTypes.func,
}

export default SubSub;

非嵌套组件间通信

非嵌套组件，就是没有任何包含关系的组件，包括兄弟组件以及不在同一个父级中的非兄弟组件。对于非嵌套组件，可以采用下面两种方式：

利用二者共同父组件的 context 对象进行通信
使用自定义事件的方式

如果采用组件间共同的父级来进行中转，会增加子组件和父组件之间的耦合度，如果组件层次较深的话，找到二者公共的父组件不是一件容易的事.
这里我们采用自定义事件的方式来实现非嵌套组件间的通信。
我们需要使用一个 events 包：

npm install events --save

新建一个 ev.js，引入 events 包，并向外提供一个事件对象，供通信时使用：

import { EventEmitter } from "events";
export default new EventEmitter();

App.js：

import React, { Component } from 'react';

import Foo from "./Foo";
import Boo from "./Boo";

import "./App.css";

export default class App extends Component{
    render(){
        return(
            <div>
                <Foo />
                <Boo />
            </div>
        );
    }
}

Foo.js：

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

export default class Foo extends Component{
    constructor(props) {
        super(props);
        this.state = {
            msg:null,
        };
    }
    componentDidMount(){
        // 声明一个自定义事件
        // 在组件装载完成以后
        this.eventEmitter = emitter.addListener("callMe",(msg)=>{
            this.setState({
                msg
            })
        });
    }
    // 组件销毁前移除事件监听
    componentWillUnmount(){
        emitter.removeListener(this.eventEmitter);
    }
    render(){
        return(
            <div>
                { this.state.msg }
                我是非嵌套 1 号
            </div>
        );
    }
}

Boo.js：

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

export default class Boo extends Component{
    render(){
        const cb = (msg) => {
            return () => {
                // 触发自定义事件
                emitter.emit("callMe","Hello")
            }
        }
        return(
            <div>
                我是非嵌套 2 号
                <button onClick = { cb("blue") }>点击我</button>
            </div>
        );
    }
}

自定义事件是典型的发布/订阅模式，通过向事件对象上添加监听器和触发事件来实现组件间通信。

组件通信的总结

父组件向子组件通信：使用 props

子组件向父组件通信：使用 props 回调

跨级组件间通信：使用 context 对象

非嵌套组件间通信：使用事件订阅

react结合redux

什么是redux？

简单点回答就是，一个管理数据的全局对象，但是它有单一状态树的概念，所谓的单一状态树，就是指“所有的state都以一个对象树的形式储存在一个单一的 store 中。”

页面中的所有状态或者数据，都应该用这种状态树的形式来描述；页面上的任何变化，都应该先去改变这个状态树，然后再通过某种方式实现到页面上。

或者换句话说，我们要做的核心工作，就是用单个对象去描述页面的状态，然后通过改变这个对象来操控页面。

redux核心概念通俗化

Action：是把数据从应用传到 store 的有效载荷，通俗一点就是描述一个动作
比如：
你的女朋友给你发了个消息，消息的内容就是，”快去给我清空购物车”，那么这个内容在redux中就是action的意思

Reducer：Action 只是描述了有事情发生了这一事实，并没有指明应用如何更新 state。而这正是 reducer 要做的事情。一般称其为规则
比如：
你女朋友已经给你发完消息了，但是只是一个消息，你是执行者，你是怎么执行的他不关心，那么你执行的这个过程就是reducer，为什么叫规则那，因为你执行的这个过程本就是规则，你先得有钱，然后登录他的帐号，然后结算

Store：Store 就是把 Reducer 和 action 联系到一起的对象。
Store 有以下职责：
维持应用的 state；
提供getState()方法获取 state；
提供 dispatch(action) 方法更新 state；
通过 subscribe(listener) 注册监听器；

安装

npm install redux --save (单纯只使用redux)
npm install react-redux --save (结合react使用redux)

注意：
1.Redux 和 React 之间没有关系。Redux 可以搭配 React、Angular 甚至纯 JS。但是 Redux 还是比较适合和 React 搭配的，因为 React 允许你以 state 的形式来描述界面，而 Redux 非常擅长控制 state 的变化。
2.Redux 和 React 的结合需要用到 redux-react 这个库

案例说明

ActionType

抛出两个type常量

export const SET_AGE = 'SET_AGE'
export const SET_NAME = 'SET_NAME'

Action

创建action

//home.js
import {SET_NAME, SET_AGE} from '../actionType'

export function set_age (age) {
  return {
    type: SET_AGE,
    age
  }
}

export function set_name (name) {
  return {
    type: SET_AGE,
    name
  }
}

//about.js同上，就是一个模拟，可以写不同的数据

reducer规则

//reducer/home.js

import {SET_NAME, SET_AGE} from '../ActionType'

const initialState = {
  name: 'Vicky',
  age: 22
}

export default (state = initialState, action) => {
  switch (action.type) {
    case SET_NAME:
      return Object.assign({}, state, {
        name: action.name
      })
    case SET_AGE:
      return Object.assign({}, state, {
        age: action.age
      })
    default:
      return state
  }
}

//reducer/about.js   同上写法可自定义

//reducer/index.js
import {combineReducers} from 'redux'
import home from './home'
import about from './about'

export default combineReducers(
  {
    home,
    about
  }
)

view

bindActionCreators：把 action creators 转成拥有同名 keys 的对象，但使用 dispatch 把每个 action creator 包围起来，这样可以直接调用它们。
connect：连接 React 组件与 Redux store。

view

import React, { Component } from 'react';
import * as pageActions from '../../action'
import {bindActionCreators} from 'redux'
import {connect} from 'react-redux'

class Inbox extends Component {
  constructor (props) {
    super(props)
    console.log(this.props)
  }

  render() {
    return (
      <div className="Inbox">
        index
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
      pageState: state.home
  }
}

function mapDispatchToProps(dispatch) {
  return {
    pageActions: bindActionCreators(pageActions, dispatch)
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Inbox)

// export default Inbox;

index.js

将react和redux结合

createStore：创建一个 Redux store 来以存放应用中所有的 state。应用中应有且仅有一个 store。
<Provider /> ：是由 React Redux 提供的高阶组件，用来让你将 Redux 绑定到 React，让所有容器组件都可以访问 store，而不必显示地传递它。只需要在渲染根组件时使用即可。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {createStore} from 'redux'

import {
  BrowserRouter as Router,
  Route,
  Link,
  Switch,
  Redirect
} from 'react-router-dom'
import {Provider} from 'react-redux'

import Home from './view/Inbox'
import About from './view/About'
import rootReducer from './Reducer'

//创建store
const store = createStore(rootReducer)

const BasicExample = () => (
  <Router>
    <div>
      <Switch>
        <Route exact path="/home" component={Home}/>
        <Route path="/about" component={About}/>
      </Switch>
    </div>
  </Router>
)

ReactDOM.render(
  <Provider store={store}>
    <BasicExample />
  </Provider>,
  document.getElementById('root')
);

redux工作流程

这里写图片描述

首先，用户发出 Action。

store.dispatch(action);

然后，Store 自动调用 Reducer，并且传入两个参数：当前 State 和收到的 Action。 Reducer 会返回新的 State 。

let nextState = todoApp(previousState, action);

State 一旦有变化，Store 就会调用监听函数。

// 设置监听函数
store.subscribe(listener);

listener可以通过store.getState()得到当前状态。如果使用的是 React，这时可以触发重新渲染 View。

function listerner() {
  let newState = store.getState();
  component.setState(newState);   
}

react安装

直接下载使用

使用 create-react-app 快速构建 React 开发环境

react组件的构建

React.createClass （ES5）

ES6 class

无状态函数

react生命周期

React中使用原生事件

组件间通信

父组件向子组件通信

子组件向父组件通信

跨级组件之间通信

非嵌套组件间通信

组件通信的总结

react结合redux

什么是redux？

redux核心概念通俗化

安装

案例说明

目录

ActionType

Action

reducer规则

view

view

index.js

index.js

redux工作流程

猜你喜欢