React学习(三)更多特性

props.children使代码更加优雅

  • 当需要编写一个容器类组件,我们需要把内容传入容器,一个通用写法是
    class Container extends React.Component {
    render(){
      return(
        <div>
          <div className="content">
            {this.props.content}
          </div>
        </div>)
    }
    }
    class Card extends React.Component {
    render() {
      return (
      <Container content={
          <div>
            this is the content
          </div>
      }></Container>)
    }
    }
    
  • 使用props.children相当于一个占位符,更改后的写法变为
    class Container extends React.Component {
    render(){
      return(
        <div>
          <div className="content">
            {this.props.children}
          </div>
        </div>)
    }
    }
    class Card extends React.Component {
    render() {
      return (
        <Container>
          <div>this is the content</div>
        </Container>)
    }
    }
    

PropTypes 类型检查

  • PropTypes 包含一整套验证器,可用于确保你接收的数据是有效的。在开发模式下,当你给属性传递了无效值时,控制台将会打印警告
  • 类型
    • JS原生类型:array, bool, func, number, object, string, symbol
    • 任何可被渲染的元素(包括数字、字符串、子元素或数组):node
    • 一个 React 元素:element
    • 某个类的实例:instanceOf(SomeClass)`
    • 限制你的属性值是某个特定值之一:oneOf([Array of Value])`
    • 限制它为列举类型之一的对象:oneOfType([Array of PropsTypes])
    • 一个指定元素类型的数组:arrayOf(PropTypes)
    • 一个指定类型的对象:objectOf(PropTypes)
    • 一个指定属性及其类型的对象:shape(Object)
  • 限制:
    • 可以在任何 PropTypes 属性后面加上 isRequired 后缀
    • 指定一个自定义验证器。它应该在验证失败时返回一个 Error 对象
      customProp: function(props, propName, componentName) {
      if (!/matchme/.test(props[propName])) {
        return new Error(
          'Invalid prop `' + propName + '` supplied to' +
          ' `' + componentName + '`. Validation failed.'
        );
      }
      }
      
  • 示例
    import React, { Component } from 'react'
    import PropTypes from 'prop-types'
    class Test extends Component {
    static propTypes = {
      name: PropTypes.string
    }
    render () {
      //...
    }
    }
    //or
    Test.propTypes = {
    name: PropTypes.string
    };
    
  • 其他静态类型检查工具:TypeScript, Flow, Reason, Kotlin等

defaultProps 为 props定义默认值

// 为属性指定默认值:
Test.defaultProps = {
  name: 'Stranger'
};

Refs & DOM

  • Refs 提供了一种方式,用于访问在 render 方法中创建的 DOM 节点或 React 元素
  • 适合使用 refs 的情况:
    • 处理焦点、文本选择或媒体控制
    • 触发强制动画
    • 集成第三方 DOM 库
  • React 会在组件加载时将 DOM 元素传入 current 属性,在卸载时则会改回 null
  • 用法
    class MyComponent extends React.Component {
    constructor(props) {
      super(props);
      this.myRef = React.createRef();
    }
    render() {
      return <div ref={this.myRef} />;
    }
    }
    // or 函数式组件
    <div ref={(input) => this.input = input} />;
    //访问
    const node = this.myRef.current;
    

性能优化

  • 重写shouldComponentUpdate
  • 继承React.PureComponent
  • 解决简单比较问题且不突变原始对象的方案:concat, es6的展开语法,Object.assign
  • immutable.js是解决不可突变的数据结构的另一种方案
    const SomeRecord = Immutable.Record({ foo: null });
    const x = new SomeRecord({ foo: 'bar' });
    const y = x.set('foo', 'baz');
    x === y; // false
    

高阶组件

  • 高阶组件(HOC)是react中的高级技术,用来重用组件逻辑。高阶组件就是一个函数,且该函数接受一个组件作为参数,并返回一个新的组件

  转载请注明: Blog React学习(三)更多特性

 上一篇
React与Vue有什么异同 React与Vue有什么异同
相似之处React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。 将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交
2019-02-20
下一篇 
React学习(二)用React的方式思考 React学习(二)用React的方式思考
参考资料 React官方文档 《移动Web前端高效开发实战》 React理念React 最初的目的是使用 JavaScript 创建大型的,快速响应的网络应用。React的众多优点之一是它让你在编写代码的时候同时也在思考你的应用。我们通过
2019-02-11
  目录