React中的小知识点

niceforbear 发布于2019-08-20 16:59 / 3077人阅读

摘要：配置默认和中的操作并不能完全满足所有操作需求，有些时候还是需要和打交道。当中提供了属性来帮助我们获取已经挂载元素的节点。当元素在页面上挂载完成以后，就会调用这个函数，并且把这个挂载以后的节点传给这个函数。

配置默认 defaultProps

class ExampleComponent extends React.Component{
    static defaultProps = {
        value: 0
    }
    ...
}

/*-------------------------------*/
class ExampleComponent extends React.Component{
    ...
}
ExampleComponent.defaultProps = {
    value: 0
}

ref和React中的DOM操作

React.js并不能完全满足所有DOM操作需求，有些时候还是需要和DOM打交道。比如进入页面后自动focus到某个输入框，这是需要调用input.focus()的DOM API。React当中提供了ref属性来帮助我们获取 已经挂载元素 的DOM节点。具体的使用方法如下：

class ExampleInput extends Component {
  componentDidMount () { 
    this.input.focus()
  }

  render () {
    return (
       this.input = input} />
    )
  }
}

可以看到我们给 input 元素加了一个 ref 属性，这个属性值是一个函数。当 input 元素在页面上挂载完成以后 ，React 就会调用这个函数，并且把这个挂载以后的 DOM 节点传给这个函数。在函数中我们把这个 DOM 元素设置为组件实例的一个属性，这样以后我们就可以通过 this.input 获取到这个 DOM 元素。

dangerouslySetInnerHTML

出于安全考虑的原因（XSS 攻击），在 React当中所有通过表达式插入的内容都会被自动转义

class ExampleComponent extends React.Component {
  render () {
    const content = "Hello World"
    return (
      
        {content}  
      
    )
  }
}

在上面的例子中，content的内容会被自动转义，当组件被渲染后，页面显示的是文本形式的"

Hello World

如果想要动态的向元素内部插入新的元素内容，该如何做呢？这时就需要使用dangerouslySetInnerHTML属性了

class ExampleComponent extends React.Component {
  render () {
    const content = "Hello World"
    return (
       
    )
  }
}

组件参数验证

React提供了一种机制，可以给props中的属性进行类型验证.如果需要对参数进行类型验证，需要安装一个由React提供的第三方库prop-types

安装prop-types

npm install --save prop-types

使用prop-types验证参数类型

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

class Comment extends Component {
  static propTypes = {
    comment: PropTypes.object  // 要求 this.props.comment 必须是 object类型
  }
....

prop-types提供的数据类型

PropTypes.array
PropTypes.bool
PropTypes.func
PropTypes.number
PropTypes.object
PropTypes.string
PropTypes.node
PropTypes.element
...

云服务器 GPU云服务器关于网络安全的小知识 java中的小程序 react _React

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83295.html

写一本关于 React.js 的小书

摘要：因为工作中一直在使用，也一直以来想总结一下自己关于的一些知识经验。于是把一些想法慢慢整理书写下来，做成一本开源免费专业简单的入门级别的小书，提供给社区。本书的后续可能会做成视频版本，敬请期待。本作品采用署名禁止演绎国际许可协议进行许可 React.js 小书本文作者：胡子大哈本文原文：React.js 小书转载请注明出处，保留原文链接以及作者信息在线阅读：http://huzi...

Scorpion 2019-08-21 11:39 评论0 收藏0
适合React及前端开发入门的小项目推荐

摘要：最近刚进入公司实习，找工作的过程中发现还是基础比较重要吧。分享一些关于前端开发入门和入门的小项目小任务吧。百度前端技术学院的任务其实能把百度前端技术学院的任务做完就很不错啦，这里推荐几个比较好的任务。可以学到前端工程化和入门的相关知识。最近刚进入公司实习，找工作的过程中发现还是基础比较重要吧。分享一些关于前端开发入门和React入门的小项目（小任务）吧。百度前端技术学院的任务其实...

Vicky 2019-08-21 11:16 评论0 收藏0
2017文章总结

摘要：欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径开启性能优化之旅高性能滚动及页面渲染优化理论写法对压缩率的影响唯快不破应用的个优化步骤进阶鹅厂大神用直出实现网页瞬开缓存网页性能管理详解写给后端程序员的缓存原理介绍年底补课缓存机制优化动欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径 - 开启性能优化之旅高性能滚动 scroll 及页面渲染优化理论 | HTML写法...

dailybird 2019-08-01 18:28 评论0 收藏0
2017文章总结

摘要：欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径开启性能优化之旅高性能滚动及页面渲染优化理论写法对压缩率的影响唯快不破应用的个优化步骤进阶鹅厂大神用直出实现网页瞬开缓存网页性能管理详解写给后端程序员的缓存原理介绍年底补课缓存机制优化动欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径 - 开启性能优化之旅高性能滚动 scroll 及页面渲染优化理论 | HTML写法...

hellowoody 2019-08-22 14:02 评论0 收藏0
2017文章总结

摘要：欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径开启性能优化之旅高性能滚动及页面渲染优化理论写法对压缩率的影响唯快不破应用的个优化步骤进阶鹅厂大神用直出实现网页瞬开缓存网页性能管理详解写给后端程序员的缓存原理介绍年底补课缓存机制优化动欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径 - 开启性能优化之旅高性能滚动 scroll 及页面渲染优化理论 | HTML写法...

wwolf 2019-08-29 14:21 评论0 收藏0