react 的五脏六腑ing~

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react 的五脏六腑ing~相关的知识,希望对你有一定的参考价值。

  用react一年多了.一直是在别人的影子下写的代码,他们也确实都是大神级的人物,不过,小菜鸟也有小菜鸟的思想~这不,今天就在重温一遍react!记一些零碎的知识点~不知道对你们有没有用,不过,对于我,绝对有用!所有的这些均参考于http://www.ruanyifeng.com/blog/2015/03/react.html  

  react官方文档 https://facebook.github.io/react/docs/events.html#supported-events

  1  var names = [‘fr‘,‘de‘]

   ReactDOM.render(

    (1)<h1 id=‘h1‘>你好,学长</h1>

    document.getElementById(‘h1‘)

 

    (2)<div>

      {

        names.map(function(name){

          return <div>Hello {name} </div>

        })

      }

     </div>

    document.getElementById(‘h1‘)  

    )

  ReactDom.render是React的基本语法,用处:将模板转为HTML,并插入指定的DOM节点    

  react的特有语法:JSX 上例允许HTML和javascript混写 

  JSX的基本语法规则:1 遇到HTML标签用<>开头,会用HTML规则解析,遇到代码块用{}开头,会以javaScript解析

  组件:React允许将代码封装成组件,然后向插入普通HTML标签一样,在网页中插入这个组件,React.createClass用于生成一个组件类,而且组件类只能一个顶层标签

技术分享这个就是错的,因为他有两个标签 ,应该在最外边包含一个<div>标签

  组件的用法于HTML标签用法一致,组件的属性可以用this.props对象获取,有一点需要注意:他的class和for属性需要变成className和htmlFor,因为class和for是JavaScript的保留字

  this.props的属性与组件的属性一一对应,但this.props.children代表组件的所有子节点,this.props.children有三种可能性,若没子节点,则表示undefind,有一个子节点则表示object,若为多个子节点,则为array,react提供了一个工具方法来处理this.props.children, 就是React.Children.map()来遍历子节点

  PropTypes属性:验证组件实例的属性是否满足要求

  getDefaultProps方法:用来设置属性的默认值

  获取真实的DOM节点:利用this.refs.[refName]

  this.state和this.props都是描述组件的特性,区别在于:this.state指的是可以改变的特性,而this.props指的是一旦定义就不在改变的特性

以上是关于react 的五脏六腑ing~的主要内容,如果未能解决你的问题,请参考以下文章

React 实践项目

从Preact中了解React组件和hooks基本原理

从Preact中了解React组件和hooks基本原理

本地图像现在显示 React Native

React-redux 应用不再自动更新

React-native:- 位置权限对话框不起作用