React总结:一文知React

https://segmentfault.com/a/1190000012921279

React 背景介绍

  • React 入门实例教程

React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。

什么是React

  • A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

    • 用来构建UI的 JavaScript库
    • React 不是一个 MVC 框架,仅仅是视图(V)层的库
  • React 官网
  • React 中文文档

特点

  • 1 使用 JSX语法 创建组件,实现组件化开发,为函数式的 UI 编程方式打开了大门
  • 2 性能高的让人称赞:通过 diff算法虚拟DOM 实现视图的高效更新
  • 3 HTML仅仅是个开始
> JSX --TO--> EveryThing

- JSX --> HTML
- JSX --> native ios或android中的组件(XML)
- JSX --> VR
- JSX --> 物联网

为什么要用React

  • 1 使用组件化开发方式,符合现代Web开发的趋势
  • 2 技术成熟,社区完善,配件齐全,适用于大型Web项目(生态系统健全)
  • 3 由Facebook专门的团队维护,技术支持可靠
  • 4 ReactNative - Learn once, write anywhere: Build mobile apps with React
  • 5 使用方式简单,性能非常高,支持服务端渲染
  • 6 React非常火,从技术角度,可以满足好奇心,提高技术水平;从职业角度,有利于求职和晋升,有利于参与潜力大的项目

React中的核心概念

  • 1 虚拟DOM(Virtual DOM)
  • 2 Diff算法(虚拟DOM的加速器,提升React性能的法宝)

虚拟DOM(Vitural DOM)

React将DOM抽象为虚拟DOM,虚拟DOM其实就是用一个对象来描述DOM,通过对比前后两个对象的差异,最终只把变化的部分重新渲染,提高渲染的效率

为什么用虚拟dom,当dom反生更改时需要遍历 而原生dom可遍历属性多大231个 且大部分与渲染无关 更新页面代价太大

  • 如何实现一个 Virtual DOM 算法
  • 理解 Virtual DOM

VituralDOM的处理方式

  • 1 用 JavaScript 对象结构表示 DOM 树的结构,然后用这个树构建一个真正的 DOM 树,插到文档当中
  • 2 当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异
  • 3 把2所记录的差异应用到步骤1所构建的真正的DOM树上,视图就更新了

Diff算法

  • Reconciliation diff
  • diff算法 - 中文文档
  • 不可思议的 react diff
  • React diff 算法
当你使用React的时候,在某个时间点 render() 函数创建了一棵React元素树,
在下一个state或者props更新的时候,render() 函数将创建一棵新的React元素树,
React将对比这两棵树的不同之处,计算出如何高效的更新UI(只更新变化的地方)
  • React中有两种假定:

    • 1 两个不同类型的元素会产生不同的树(根元素不同结构树一定不同)
    • 2 开发者可以通过key属性指定不同树中没有发生改变的子元素

Diff算法的说明 - 1

  • 如果两棵树的根元素类型不同,React会销毁旧树,创建新树
// 旧树
// 新树 执行过程:destory Counter -> insert Counter

Diff算法的说明 - 2

  • 对于类型相同的React DOM 元素,React会对比两者的属性是否相同,只更新不同的属性
  • 当处理完这个DOM节点,React就会递归处理子节点。
// 旧
// 新
只更新:className 属性 // 旧
// 新
只更新:color属性

Diff算法的说明 - 3

  • 1 当在子节点的后面添加一个节点,这时候两棵树的转化工作执行的很好
// 旧
  • first
  • second
// 新
  • first
  • second
  • third
执行过程: React会匹配新旧两个
  • first
  • ,匹配两个
  • second
  • ,然后添加
  • third
  • tree
    • 2 但是如果你在开始位置插入一个元素,那么问题就来了:
    // 旧
    
    • Duke
    • Villanova
    // 新
    • Connecticut
    • Duke
    • Villanova
    在没有key属性时执行过程: React将改变每一个子删除重新创建,而非保持
  • Duke
  • Villanova
  • 不变

    key 属性

    为了解决以上问题,React提供了一个 key 属性。当子节点带有key属性,React会通过key来匹配原始树和后来的树。
    // 旧
    
    • Duke
    • Villanova
    // 新
    • Connecticut
    • Duke
    • Villanova
    执行过程: 现在 React 知道带有key '2014' 的元素是新的,对于 '2015' 和 '2016' 仅仅移动位置即可
    • 说明:key属性在React内部使用,但不会传递给你的组件
    • 推荐:在遍历数据时,推荐在组件中使用 key 属性:
    • {item.name}
    • 注意:key只需要保持与他的兄弟节点唯一即可,不需要全局唯一
    • 注意:尽可能的减少数组index作为key,数组中插入元素的等操作时,会使得效率底下

    React的基本使用

    • 安装:npm i -S react react-dom
    • react:react 是React库的入口点
    • react-dom:提供了针对DOM的方法,比如:把创建的虚拟DOM,渲染到页面上
    // 1. 导入 react
    import React from 'react'
    import ReactDOM from 'react-dom'
    
    // 2. 创建 虚拟DOM
    // 参数1:元素名称  参数2:元素属性对象(null表示无)  参数3:当前元素的子元素string||createElement() 的返回值
    const divVD = React.createElement('div', {
      title: 'hello react'
    }, 'Hello React!!!')
    
    // 3. 渲染
    // 参数1:虚拟dom对象  参数2:dom对象表示渲染到哪个元素内 参数3:回调函数
    ReactDOM.render(divVD, document.getElementById('app'))

    createElement()的问题

    • 说明:createElement()方式,代码编写不友好,太复杂
    var dv = React.createElement(
      "div",
      { className: "shopping-list" },
      React.createElement(
        "h1",
        null,
        "Shopping List for "
      ),
      React.createElement(
        "ul",
        null,
        React.createElement(
          "li",
          null,
          "Instagram"
        ),
        React.createElement(
          "li",
          null,
          "WhatsApp"
        )
      )
    )
    // 渲染
    ReactDOM.render(dv, document.getElementById('app'))

    JSX 的基本使用

    • 注意:JSX语法,最终会被编译为 createElement() 方法
    • 推荐:使用 JSX 的方式创建组件
    • JSX - JavaScript XML
    • 安装:npm i -D babel-preset-react (依赖与:babel-core/babel-loader)
    注意:JSX的语法需要通过 babel-preset-react 编译后,才能被解析执行
    /* 1 在 .babelrc 开启babel对 JSX 的转换 */
    {
      "presets": [
        "env", "react"
      ]
    }
    
    /* 2 webpack.config.js */
    module: [
      rules: [
        { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
      ]
    ]
    
    /* 3 在 js 文件中 使用 JSX */
    const dv = (
      
    Hello JSX!
    ) /* 4 渲染 JSX 到页面中 */ ReactDOM.render(dv, document.getElementById('app'))

    JSX的注意点

    • 注意 1: 如果在 JSX 中给元素添加类, 需要使用 className 代替 class

      • 类似:label 的 for属性,使用htmlFor代替
    • 注意 2:在 JSX 中可以直接使用 JS代码,直接在 JSX 中通过 {} 中间写 JS代码即可
    • 注意 3:在 JSX 中只能使用表达式,但是不能出现 语句!!!
    • 注意 4:在 JSX 中注释语法:{/* 中间是注释的内容 */}

    React组件

    React 组件可以让你把UI分割为独立、可复用的片段,并将每一片段视为相互独立的部分。
    • 组件是由一个个的HTML元素组成的
    • 概念上来讲, 组件就像JS中的函数。它们接受用户输入(props),并且返回一个React对象,用来描述展示在页面中的内容

    React创建组件的两种方式

    • 1 通过 JS函数 创建(无状态组件)
    • 2 通过 class 创建(有状态组件)
    函数式组件 和 class 组件的使用场景说明:
    1 如果一个组件仅仅是为了展示数据,那么此时就可以使用 函数组件
    2 如果一个组件中有一定业务逻辑,需要操作数据,那么就需要使用 class 创建组件,因为,此时需要使用 state

    JavaScript函数创建

    • 注意:1 函数名称必须为大写字母开头,React通过这个特点来判断是不是一个组件
    • 注意:2 函数必须有返回值,返回值可以是:JSX对象或null
    • 注意:3 返回的JSX,必须有一个根元素
    • 注意:4 组件的返回值使用()包裹,避免换行问题
    function Welcome(props) {
      return (
        // 此处注释的写法 
        
    {/* 此处 注释的写法 必须要{}包裹 */}

    Shopping List for {props.name}

    • Instagram
    • WhatsApp
    ) } ReactDOM.render( , document.getElementById('app') )

    class创建

    在es6中class仅仅是一个语法糖,不是真正的类,本质上还是构造函数+原型 实现继承
    // ES6中class关键字的简单使用
    
    // - **ES6中的所有的代码都是运行在严格模式中的**
    // - 1 它是用来定义类的,是ES6中实现面向对象编程的新方式
    // - 2 使用`static`关键字定义静态属性
    // - 3 使用`constructor`构造函数,创建实例属性
    // - [参考](http://es6.ruanyifeng.com/#docs/class)
    
    // 语法:
    class Person {
      // 实例的构造函数 constructor
      constructor(age){
        // 实例属性
        this.age = age
      }
      // 在class中定义方法 此处为实例方法 通过实例打点调用
      sayHello () {
        console.log('大家好,我今年' + this.age + '了');
      }
    
      // 静态方法 通过构造函数打点调用 Person.doudou()
      static doudou () {
        console.log('我是小明,我新get了一个技能,会暖床');
      }
    }
    // 添加静态属性
    Person.staticName = '静态属性'
    // 实例化对象
    const p = new Person(19)
     
     
    // 实现继承的方式
     
    class American extends Person {
      constructor() {
        // 必须调用super(), super表示父类的构造函数
        super()
        this.skin = 'white'
        this.eyeColor = 'white'
      }
    }
    
    // 创建react对象
    // 注意:基于 `ES6` 中的class,需要配合 `babel` 将代码转化为浏览器识别的ES5语法
    // 安装:`npm i -D babel-preset-env`
     
    //  react对象继承字React.Component
    class ShoppingList extends React.Component {
      constructor(props) { 
        super(props)
      }
      // class创建的组件中 必须有rander方法 且显示return一个react对象或者null
      render() {
        return (
          

    Shopping List for {this.props.name}

    • Instagram
    • WhatsApp
    ) } }

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

    • 组件中有一个 只读的对象 叫做 props,无法给props添加属性
    • 获取方式:函数参数 props
    • 作用:将传递给组件的属性转化为 props 对象中的属性
    function Welcome(props){
      // props ---> { username: 'zs', age: 20 }
      return (
        
    Welcome React

    姓名:{props.username}----年龄是:{props.age}

    ) } // 给 Hello组件 传递 props:username 和 age(如果你想要传递numb类型是数据 就需要向下面这样) ReactDOM.reander(, ......)

    封装组件到独立的文件中

    // 创建Hello2.js组件文件
    // 1. 引入React模块
    // 由于 JSX 编译后会调用 React.createElement 方法,所以在你的 JSX 代码中必须首先拿到React。
    import React from 'react'
    
    // 2. 使用function构造函数创建组件
    function Hello2(props){
      return (
        
    这是Hello2组件

    这是大大的H1标签,我大,我骄傲!!!

    这是小小的h6标签,我小,我傲娇!!!
    ) } // 3. 导出组件 export default Hello2 // app.js中 使用组件: import Hello2 from './components/Hello2'

    props和state

    props

    • 作用:给组件传递数据,一般用在父子组件之间
    • 说明:React把传递给组件的属性转化为一个对象并交给 props
    • 特点:props是只读的,无法给props添加或修改属性
    • props.children:获取组件的内容,比如:

      • 组件内容 中的 组件内容
    // props 是一个包含数据的对象参数,不要试图修改 props 参数
    // 返回值:react元素
    function Welcome(props) {
      // 返回的 react元素中必须只有一个根元素
      return 
    hello, {props.name}
    } class Welcome extends React.Component { constructor(props) { super(props) } render() { return

    Hello, {this.props.name}

    } }

    state

    状态即数据
    • 作用:用来给组件提供组件内部使用的数据
    • 注意:只有通过class创建的组件才具有状态
    • 注意:状态是私有的,完全由组件来控制
    • 注意:不要在 state 中添加 render() 方法中不需要的数据,会影响渲染性能!

      • 可以将组件内部使用但是不渲染在视图中的内容,直接添加给 this
    • 注意:不要在 render() 方法中调用 setState() 方法来修改state的值

      • 但是可以通过 this.state.name = 'rose' 方式设置state(不推荐!!!!)
    // 例:
    class Hello extends React.Component {
      constructor() {
        // es6继承必须用super调用父类的constructor
        super()
    
        this.state = {
          gender: 'male'
        }
      }
    
      render() {
        return (
          
    性别:{ this.state.gender }
    ) } }

    JSX语法转化过程

    // 1、JSX
    const element = (
      

    Hello, world!

    ) // 2、JSX -> createElement const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' ) // React elements: 使用对象的形式描述页面结构 // Note: 这是简化后的对象结构 const element = { type: 'h1', props: { className: 'greeting', }, children: ['Hello, world'] }

    评论列表案例

    • 巩固有状态组件和无状态组件的使用
    • 两个组件:
    [
      { user: '张三', content: '哈哈,沙发' },
      { user: '张三2', content: '哈哈,板凳' },
      { user: '张三3', content: '哈哈,凉席' },
      { user: '张三4', content: '哈哈,砖头' },
      { user: '张三5', content: '哈哈,楼下山炮' }
    ]
    
    // 属性扩展
    

    style样式

    // 1. 直接写行内样式:
    
  • // 2. 抽离为对象形式 var styleH3 = {color:'blue'} var styleObj = { liStyle:{border:'1px solid red', fontSize:'12px'}, h3Style:{color:'green'} }
  • 评论内容:{props.content}

  • // 3. 使用样式表定义样式: import '../css/comment.css'

    评论人:{props.user}

    相关文章

    • React数据流和组件间的沟通总结
    • 单向数据流和双向绑定各有什么优缺点?
    • 怎么更好的理解虚拟DOM?
    • React中文文档
    • React 源码剖析系列 - 不可思议的 react diff
    • 深入浅出React(四):虚拟DOM Diff算法解析

    组件的生命周期

    • 简单说:一个组件从开始到最后消亡所经历的各种状态,就是一个组件的生命周期

    组件生命周期函数的定义:从组件被创建,到组件挂载到页面上运行,再到页面关闭组件被卸载,这三个阶段总是伴随着组件各种各样的事件,那么这些事件,统称为组件的生命周期函数!

    • 通过这个函数,能够让开发人员的代码,参与到组件的生命周期中。也就是说,通过钩子函数,就可以控制组件的行为
    • react component
    • React Native 中组件的生命周期
    • React 生命周期的管理艺术
    • 智能组件和木偶组件

    组件生命周期函数总览

    • 组件的生命周期包含三个阶段:创建阶段(Mounting)、运行和交互阶段(Updating)、卸载阶段(Unmounting)
    • Mounting:
    constructor()
    componentWillMount()
    render()
    componentDidMount()
    • Updating
    componentWillReceiveProps()
    shouldComponentUpdate()
    componentWillUpdate()
    render()
    componentDidUpdate()
    • Unmounting
    componentWillUnmount()

    组件生命周期 - 创建阶段(Mounting)

    • 特点:该阶段的函数只执行一次

    constructor()

    • 作用:1 获取props 2 初始化state
    • 说明:通过 constructor() 的参数props获取
    • 设置state和props
    class Greeting extends React.Component {
      constructor(props) {
        // 获取 props
        super(props)
        // 初始化 state
        this.state = {
          count: props.initCount
        }
      }
    }
    
    // 初始化 props
    // 语法:通过静态属性 defaultProps 来初始化props
    Greeting.defaultProps = {
      initCount: 0
    };

    componentWillMount()

    • 说明:组件被挂载到页面之前调用,其在render()之前被调用,因此在这方法里同步地设置状态将不会触发重渲染
    • 注意:无法获取页面中的DOM对象
    • 注意:可以调用 setState() 方法来改变状态值
    • 用途:发送ajax请求获取数据
    componentWillMount() {
      console.warn(document.getElementById('btn')) // null
      this.setState({
        count: this.state.count + 1
      })
    }

    render()

    • 作用:渲染组件到页面中,无法获取页面中的DOM对象
    • 注意:不要在render方法中调用 setState() 方法,否则会递归渲染

      • 原因说明:状态改变会重新调用render()render()又重新改变状态
    render() {
      console.warn(document.getElementById('btn')) // null
    
      return (
        
    { this.state.count === 4 ? null : }
    ) }

    componentDidMount()

    • 1 组件已经挂载到页面中
    • 2 可以进行DOM操作,比如:获取到组件内部的DOM对象
    • 3 可以发送请求获取数据
    • 4 可以通过 setState() 修改状态的值
    • 注意:在这里修改状态会重新渲染
    componentDidMount() {
      // 此时,就可以获取到组件内部的DOM对象
      console.warn('componentDidMount', document.getElementById('btn'))
    }

    组件生命周期 - 运行阶段(Updating)

    • 特点:该阶段的函数执行多次
    • 说明:每当组件的props或者state改变的时候,都会触发运行阶段的函数

    componentWillReceiveProps()

    • 说明:组件接受到新的props前触发这个方法
    • 参数:当前组件props
    • 可以通过 this.props 获取到上一次的值
    • 使用:若你需要响应属性的改变,可以通过对比this.propsnextProps并在该方法中使用this.setState()处理状态改变
    • 注意:修改state不会触发该方法
    componentWillReceiveProps(nextProps) {
      console.warn('componentWillReceiveProps', nextProps)
    }

    shouldComponentUpdate()

    • 作用:根据这个方法的返回值决定是否重新渲染组件,返回true重新渲染,否则不渲染
    • 优势:通过某个条件渲染组件,降低组件渲染频率,提升组件性能
    • 说明:如果返回值为false,那么,后续render()方法不会被调用
    • 注意:这个方法必须返回布尔值!!!
    • 场景:根据随机数决定是否渲染组件
    // - 参数:
    //   - 第一个参数:最新属性对象
    //   - 第二个参数:最新状态对象
    shouldComponentUpdate(nextProps, nextState) {
      console.warn('shouldComponentUpdate', nextProps, nextState)
    
      return nextState.count % 2 === 0
    }

    componentWillUpdate()

    • 作用:组件将要更新
    • 参数:最新的属性和状态对象
    • 注意:不能修改状态 否则会循环渲染
    componentWillUpdate(nextProps, nextState) {
      console.warn('componentWillUpdate', nextProps, nextState)
    }

    render() 渲染

    • 作用:重新渲染组件,与Mounting阶段的render是同一个函数
    • 注意:这个函数能够执行多次,只要组件的属性或状态改变了,这个方法就会重新执行

    componentDidUpdate()

    • 作用:组件已经被更新
    • 参数:旧的属性和状态对象
    componentDidUpdate(prevProps, prevState) {
      console.warn('componentDidUpdate', prevProps, prevState)
    }

    组件生命周期 - 卸载阶段(Unmounting)

    • 组件销毁阶段:组件卸载期间,函数比较单一,只有一个函数,这个函数也有一个显著的特点:组件一辈子只能执行依次!
    • 使用说明:只要组件不再被渲染到页面中,那么这个方法就会被调用( 渲染到页面中 -> 不再渲染到页面中 )

    componentWillUnmount()

    • 作用:在卸载组件的时候,执行清理工作,比如

      • 1 清除定时器
      • 2 清除componentDidMount创建的DOM对象

    React - createClass(不推荐)

    • React.createClass({}) 方式,创建有状态组件,该方式已经被废弃!!!
    • 通过导入 require('create-react-class'),可以在不适用ES6的情况下,创建有状态组件
    • getDefaultProps() 和 getInitialState() 方法:是 createReactClass() 方式创建组件中的两个函数
    • React without ES6
    • React 不适用ES6
    var createReactClass = require('create-react-class');
    var Greeting = createReactClass({
      // 初始化 props
      getDefaultProps: function() {
        console.log('getDefaultProps');
        return {
          title: 'Basic counter!!!'
        }
      },
    
      // 初始化 state
      getInitialState: function() {
        console.log('getInitialState');
        return {
          count: 0
        }
      },
    
      render: function() {
        console.log('render');
        return (
          

    {this.props.title}

    {this.state.count}
    ); }, handleIncrement: function() { var newCount = this.state.count + 1; this.setState({count: newCount}); }, propTypes: { title: React.PropTypes.string } }); ReactDOM.render( React.createElement(Greeting), document.getElementById('app') );

    state和setState

    • 注意:使用 setState() 方法修改状态,状态改变后,React会重新渲染组件
    • 注意:不要直接修改state属性的值,这样不会重新渲染组件!!!
    • 使用:1 初始化state 2 setState修改state
    // 修改state(不推荐使用)
    // https://facebook.github.io/react/docs/state-and-lifecycle.html#do-not-modify-state-directly
    this.state.test = '这样方式,不会重新渲染组件';
    constructor(props) {
      super(props)
    
      // 正确姿势!!!
      // -------------- 初始化 state --------------
      this.state = {
        count: props.initCount
      }
    }
    
    componentWillMount() {
      // -------------- 修改 state 的值 --------------
      // 方式一:
      this.setState({
        count: this.state.count + 1
      })
    
      this.setState({
        count: this.state.count + 1
      }, function(){
        // 由于 setState() 是异步操作,所以,如果想立即获取修改后的state
        // 需要在回调函数中获取
        // https://doc.react-china.org/docs/react-component.html#setstate
      });
    
      // 方式二:
      this.setState(function(prevState, props) {
        return {
          counter: prevState.counter + props.increment
        }
      })
    
      // 或者 - 注意: => 后面需要带有小括号,因为返回的是一个对象
      this.setState((prevState, props) => ({
        counter: prevState.counter + props.increment
      }))
    }

    组件绑定事件

    • 1 通过React事件机制 onClick 绑定
    • 2 JS原生方式绑定(通过 ref 获取元素)

      • 注意:ref 是React提供的一个特殊属性
      • ref的使用说明:react ref

    React中的事件机制 - 推荐

    • 注意:事件名称采用驼峰命名法
    • 例如:onClick 用来绑定单击事件

    JS原生方式 - 知道即可

    • 说明:给元素添加 ref 属性,然后,获取元素绑定事件
    // JSX
    // 将当前DOM的引用赋值给 this.txtInput 属性
     this.txtInput = input } type="button" value="我是豆豆" />
    
    componentDidMount() {
      // 通过 this.txtInput 属性获取元素绑定事件
      this.txtInput.addEventListener(() => {
        this.setState({
          count:this.state.count + 1
        })
      })
    }

    事件绑定中的this

    • 1 通过 bind 绑定
    • 2 通过 箭头函数 绑定

    通过bind绑定

    • 原理:bind能够调用函数,改变函数内部this的指向,并返回一个新函数
    • 说明:bind第一个参数为返回函数中this的指向,后面的参数为传给返回函数的参数
    // 自定义方法:
    handleBtnClick(arg1, arg2) {
      this.setState({
        msg: '点击事件修改state的值' + arg1 + arg2
      })
    }
    
    render() {
      return (
        

    {this.state.msg}

    ) }
    • 在构造函数中使用bind
    constructor() {
      super()
    
      this.handleBtnClick = this.handleBtnClick.bind(this)
    }
    
    // render() 方法中:
    

    通过箭头函数绑定

    • 原理:箭头函数中的this由所处的环境决定,自身不绑定this
     { this.handleBtnClick('参数1', '参数2') }
    } />
    
    handleBtnClick(arg1, arg2) {
      this.setState({
        msg: '在构造函数中绑定this并传参' + arg1 + arg2
      });
    }

    受控组件

    • 表单和受控组件
    • 非受控组件
    在HTML当中,像 input, textareaselect这类表单元素会维持自身状态,并根据用户输入进行更新。
    在React中,可变的状态通常保存在组件的 state中,并且只能用 setState() 方法进行更新.
    React根据初始状态渲染表单组件,接受用户后续输入,改变表单组件内部的状态。
    因此,将那些值由React控制的表单元素称为:受控组件。
    • 受控组件的特点:

      • 1 表单元素
      • 2 由React通过JSX渲染出来
      • 3 由React控制值的改变,也就是说想要改变元素的值,只能通过React提供的方法来修改
    • 注意:只能通过setState来设置受控组件的值
    // 模拟实现文本框数据的双向绑定
    
    
    // 当文本框内容改变的时候,触发这个事件,重新给state赋值
    handleTextChange = event => {
      console.log(event.target.value)
    
      this.setState({
        msg: event.target.value
      })
    }

    评论列表案例

    [
      {name: '小明', content: '沙发!!!'},
      {name: '小红', content: '小明,居然是你'},
      {name: '小刚', content: '小明,放学你别走!!!'},
    ]

    props校验

    • 作用:通过类型检查,提高程序的稳定性
    • 命令:npm i -S prop-types
    • 类型校验文档
    • 使用:给类提供一个静态属性 propTypes(对象),来约束props
    // 引入模块
    import PropTypes from 'prop-types'
    
    // ...以下代码是类的静态属性:
    // propTypes 静态属性的名称是固定的!!!
    static propTypes = {
      initCount: PropTypes.number, // 规定属性的类型
      initAge: PropTypes.number.isRequired // 规定属性的类型,且规定为必传字段
    }

    React 单向数据流

    • React 中采用单项数据流
    • 数据流动方向:自上而下,也就是只能由父组件传递到子组件
    • 数据都是由父组件提供的,子组件想要使用数据,都是从父组件中获取的
    • 如果多个组件都要使用某个数据,最好将这部分共享的状态提升至他们最近的父组件当中进行管理
    • 单向数据流
    • 状态提升
    react中的单向数据流动:
    1 数据应该是从上往下流动的,也就是由父组件将数据传递给子组件
    2 数据应该是由父组件提供,子组件要使用数据的时候,直接从子组件中获取
    
    在我们的评论列表案例中:数据是由CommentList组件(父组件)提供的
    子组件 CommentItem 负责渲染评论列表,数据是由 父组件提供的
    子组件 CommentForm 负责获取用户输入的评论内容,最终也是把用户名和评论内容传递给了父组件,由父组件负责处理这些数据( 把数据交给 CommentItem 由这个组件负责渲染 )

    组件通讯

    • 父 -> 子:props
    • 子 -> 父:父组件通过props传递回调函数给子组件,子组件调用函数将数据作为参数传递给父组件
    • 兄弟组件:因为React是单向数据流,因此需要借助父组件进行传递,通过父组件回调函数改变兄弟组件的props
    • React中的状态管理: flux(提出状态管理的思想) -> Redux -> mobx
    • Vue中的状态管理: Vuex
    • 简单来说,就是统一管理了项目中所有的数据,让数据变的可控
    • 组件通讯

    Context特性

    • 注意:如果不熟悉React中的数据流,不推荐使用这个属性

      • 这是一个实验性的API,在未来的React版本中可能会被更改
    • 作用:跨级传递数据(爷爷给孙子传递数据),避免向下每层手动地传递props
    • 说明:需要配合PropTypes类型限制来使用
    class Grandfather extends React.Component {
      // 类型限制(必须),静态属性名称固定
      static childContextTypes = {
        color: PropTypes.string.isRequired
      }
    
      // 传递给孙子组件的数据
      getChildContext() {
        return {
          color: 'red'
        }
      }
    
      render() {
        return (
          
        )
      }
    }
    
    class Child extends React.Component {
      // 类型限制,静态属性名字固定
      static contextTypes = {
        color: PropTypes.string
      }
    
      render() {
        return (
          // 从上下文对象中获取爷爷组件传递过来的数据
          

    爷爷告诉文字是红色的

    ) } } class Father extends React.Component { render() { return ( ) } }

    react-router

    • react router 官网
    • react router github
    • 安装:npm i -S react-router-dom

    基本概念说明

    • Router组件本身只是一个容器,真正的路由要通过Route组件定义

    使用步骤

    • 1 导入路由组件
    • 2 使用 作为根容器,包裹整个应用(JSX)

      • 在整个应用程序中,只需要使用一次
    • 3 使用 作为链接地址,并指定to属性
    • 4 使用 展示路由内容
    // 1 导入组件
    import {
      HashRouter as Router,
      Link, Route
    } from 'react-router-dom'
    
    // 2 使用 
    
    
        // 3 设置 Link
        首页
        电影
        关于
    
        // 4 设置 Route
        // exact 表示:绝对匹配(完全匹配,只匹配:/)
        
        
        
    
    

    注意点

    • :作为整个组件的根元素,是路由容器,只能有一个唯一的子元素
    • :类似于vue中的标签,to 属性指定路由地址
    • :类似于vue中的,指定路由内容(组件)展示位置

    路由参数

    • 配置:通过Route中的path属性来配置路由参数
    • 获取:this.props.match.params 获取
    // 配置路由参数
    
    
    // 获取路由参数
    const type = this.props.match.params.movieType

    路由跳转

    • react router - history
    • history.push() 方法用于在JS中实现页面跳转
    • history.go(-1) 用来实现页面的前进(1)和后退(-1)
    this.props.history.push('/movie/movieDetail/' + movieId)

    fetch

    • 作用:Fetch 是一个现代的概念, 等同于 XMLHttpRequest。它提供了许多与XMLHttpRequest相同的功能,但被设计成更具可扩展性和高效性。
    • fetch() 方法返回一个Promise对象

    fetch 基本使用

    • fetch Response
    • fetch 介绍
    • Javascript 中的神器——Promise
    /*
      通过fetch请求回来的数据,是一个Promise对象.
      调用then()方法,通过参数response,获取到响应对象
      调用 response.json() 方法,解析服务器响应数据
      再次调用then()方法,通过参数data,就获取到数据了
    */
    fetch('/api/movie/' + this.state.movieType)
      // response.json() 读取response对象,并返回一个被解析为JSON格式的promise对象
      .then((response) => response.json())
      // 通过 data 获取到数据
      .then((data) => {
        console.log(data);
        this.setState({
          movieList: data.subjects,
          loaing: false
        })
      })

    跨域获取数据的三种常用方式

    • 1 JSONP
    • 2 代理
    • 3 CORS

    JSONP

    • 安装:npm i -S fetch-jsonp
    • 利用JSONP实现跨域获取数据,只能获取GET请求
    • fetch-jsonp
    • fetch-jsonp
    • 限制:1 只能发送GET请求 2 需要服务端支持JSONP请求
    /* movielist.js */
    fetchJsonp('https://api.douban.com/v2/movie/in_theaters')
      .then(rep => rep.json())
      .then(data => { console.log(data) })

    代理

    • webpack-dev-server 代理配置如下:
    • 问题:webpack-dev-server 是开发期间使用的工具,项目上线了就不再使用 webpack-dev-server
    • 解决:项目上线后的代码,也是会部署到一个服务器中,这个服务器配置了代理功能即可(要求两个服务器中配置的代理规则相同)
    // webpack-dev-server的配置
    devServer: {
      // https://webpack.js.org/configuration/dev-server/#devserver-proxy
      // https://github.com/chimurai/http-proxy-middleware#http-proxy-options
      // http://www.jianshu.com/p/3bdff821f859
      proxy: {
        // 使用:/api/movie/in_theaters
        // 访问 ‘/api/movie/in_theaters’ ==> 'https://api.douban.com/v2/movie/in_theaters'
        '/api': {
          // 代理的目标服务器地址
          target: 'https://api.douban.com/v2',
          // https请求需要该设置
          secure: false,
          // 必须设置该项
          changeOrigin: true,
          // '/api/movie/in_theaters' 路径重写为:'/movie/in_theaters'
          pathRewrite: {"^/api" : ""}
        }
      }
    }
    
    /* movielist.js */
    fetch('/api/movie/in_theaters')
      .then(function(data) {
        // 将服务器返回的数据转化为 json 格式
        return data.json()
      })
      .then(function(rep) {
        // 获取上面格式化后的数据
        console.log(rep);
      })

    CORS - 服务器端配合

    • 示例:NodeJS设置跨域
    • 跨域资源共享 CORS 详解 - 阮一峰
    // 通过Express的中间件来处理所有请求
    app.use('*', function (req, res, next) {
      // 设置请求头为允许跨域
      res.header('Access-Control-Allow-Origin', '*');
    
      // 设置服务器支持的所有头信息字段
      res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization,Accept,X-Requested-With');
      // 设置服务器支持的所有跨域请求的方法
      res.header('Access-Control-Allow-Methods', 'POST,GET');
      // next()方法表示进入下一个路由
      next();
    });

    redux

    • 状态管理工具,用来管理应用中的数据

    核心

    • Action:行为的抽象,视图中的每个用户交互都是一个action

      • 比如:点击按钮
    • Reducer:行为响应的抽象,也就是:根据action行为,执行相应的逻辑操作,更新state

      • 比如:点击按钮后,添加任务,那么,添加任务这个逻辑放到 Reducer 中
      • 1 创建State
    • Store:

      • 1 Redux应用只能有一个store
      • 2 getState():获取state
      • 3 dispatch(action):更新state
    /* action */
    
    // 在 redux 中,action 就是一个对象
    // action 必须提供一个:type属性,表示当前动作的标识
    // 其他的参数:表示这个动作需要用到的一些数据
    { type: 'ADD_TODO', name: '要添加的任务名称' }
    
    // 这个动作表示要切换任务状态
    { type: 'TOGGLE_TODO', id: 1 }
    /* reducer */
    
    // 第一个参数:表示状态(数据),我们需要给初始状态设置默认值
    // 第二个参数:表示 action 行为
    function todo(state = [], action) {
      switch(action.type) {
        case 'ADD_TODO':
          state.push({ id: Math.random(), name: action.name, completed: false })
          return state
        case 'TOGGLE_TODO':
          for(var i = 0; i < state.length; i++) {
            if (state[i].id === action.id) {
              state[i].completed = !state[i].completed
              break
            }
          }
          return state
        default:
          return state
      }
    }
    
    // 要执行 ADD_TODO 这个动作:
    
    dispatch( { type: 'ADD_TODO', name: '要添加的任务名称' } )
    
    // 内部会调用 reducer
    todo(undefined, { type: 'ADD_TODO', name: '要添加的任务名称' })
    •  

    你可能感兴趣的:(React,React)