ReactAPI

React元素

元素用来描述你在屏幕上看到的内容：

const title = <h2>Hello, world</h2>;

 

React元素与DOM元素不同，React 当中的元素事实上是普通的对象，React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致。

注意: 初学者很可能把元素的定义和一个内涵更广的定义"组件"给搞混了。元素事实上只是构成组件的一个部分。

ReactDOM.render()方法

基本语法

ReactDOM.render(component|element,DOM,callback)

 

渲染组件到指定位置 render 方法带有三个参数：

参数	描述
component/element	要输出的元素 或 组件
DOM	组件或元素渲染到指定DOM位置
function(){}	组件渲染完成后回调函数

函数定义/类定义组件

React.createClass()方法就用于生成一个组件类[V16.0.0已废弃]。

函数定义组件

定义一个组件最简单的方式是使用JavaScript函数：

该函数是一个有效的React组件，它接收一个单一的“props”对象并返回了一个React元素。我们之所以称这种类型的组件为函数定义组件，是因为从字面上来看，它就是一个JavaScript函数。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

 

类定义组件

注意

1. 创建组件方法必写参数 render方法
2. 返回组件名第一字母大写(驼峰)

在React V16中，render方法支持直接返回string，number，boolean，null，portal，以及fragments(带有key属性的数组)，这可以在一定程度上减少页面的DOM层级。

//element
render(){
    return <div></div>
}
//string
render(){
    return 'hello,world'
}

//number
render(){
    return 12345
}

//boolean
render(){
    return isTrue?true:false
}

//null
render(){
    return null
}

//fragments，未加key标识符，控制台会出现warning
render(){
    return [
        <div>hello</div>,
        <span>world</span>,
        <p>oh</p>
    ]
}

 

以上各种类型现在均可以直接在render中返回，不需要再在外层包裹一层容器元素，不过在返回的数组类型中，需要在每个元素上加一个唯一且不变的key值，否则控制台会报一个warning。