React 教程第二篇—— 组件定义

组件

组件使你可以将 UI 划分为一个一个独立,可复用的小部件,并可以对每个部件进行单独的设计。

在单页面应用(SPA)中扮演着重要角色

组件简单实现 —— 函数式组件

import React from 'react'
import ReactDOM from 'react-dom'

let Component1 = () => {
    return 

React Component

} ReactDOM.render( , document.getElementById('app') )

类组件 —— ES5 语法

var React = require('react');
var ReactDOM = require('react-dom')

var Component1 = React.createClass({
    render: function(){
        return (
            

Tom

Sam

) } }) ReactDOM.render( , document.getElementById('app') )

类组件 —— ES6 语法

import React from 'react'
import ReactDOM from 'react-dom'

class Component1 extends React.Component{
    render(){
        return (
            

Tom

Sam

) } } ReactDOM.render( , document.getElementById('app') )

效果预览

组件小结

  • 组件名首字母必须为大写
  • 函数返回一个虚拟 DOM 节点
  • 类组件必须要有 render 方法
  • render 必须返回一个虚拟 DOM 节点
  • 实际工作中,类组件是常用的方式

组件属性(Props)

因为组件的调用是 html 标签的形式,而 html 标签是可以添加属性,所以在 React 的组件当中也是可以添加自定义的属性,而属性的获取则用 this.props

函数式组件

import React from 'react'
import ReactDOM from 'react-dom'

let Component1 = (props) => {
    return 

name-{props.name}

} ReactDOM.render( , document.getElementById('app') )

类组件

import React from 'react'
import ReactDOM from 'react-dom'

class Component1 extends React.Component{
    render(){
        return 

name-{this.props.name}

} } ReactDOM.render( , document.getElementById('app') )

默认属性(DefaultProps)

组件的属性除了可以通过调用的时候以 DOM 节点属性的方式传值,也可以设置默认的属性值,如果调用的时候没有传对应的属性值,则会用默认的属性值。
getDefalutProps 这个方法只会被调用一次。

//es5
var React = require('react');
var ReactDOM = require('react-dom');
var Component1 = React.createClass({
    getDefaultProps: function(){
        return {
            name: 'Tom',
            age: 20
        }
    },
    render: function(){
        return (
            

姓名:{this.props.name}

年龄:{this.props.age}

) } }) //es6 import React from 'react'; import ReactDOM from 'react-dom'; class Component1 extends React.Component{ static defaultProps = { name: 'Tom', age: 20 } render(){ return (

姓名:{this.props.name}

年龄:{this.props.age}

) } } //或者 Component1.defaultProps = { name: "Sam", age: 22 } //使用 ReactDOM.render(, document.getElementById('div1'));

属性的类型规则(propTypes)

通常情况下,在定义一个组件的时候把属性定义好,会加上一些使用的条件限制,比如某些属性值的数据类型必须是数组,或者某些属性不能为空,在这个时候,可以通过 propTypes 来设置。

import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types'

class Component1 extends React.Component{
    render(){
        return (
            

姓名:{this.props.name}

年龄:{this.props.age}

学科:

    { this.props.subjects.map(function(_item){ return
  • {_item}
  • }) }
) } } //定义属性 name 为字符串且必须有值 Component1.propTypes = { name: PropTypes.string } ReactDOM.render(, document.getElementById('div1'));

prop 默认情况下是可选,常用的类型:

  • PropTypes.array
  • PropTypes.bool
  • PropTypes.func
  • PropTypes.number
  • PropTypes.object
  • PropTypes.string
  • PropTypes.symbol
  • PropTypes.any.isRequired

你可能感兴趣的:(react.js)