React基础篇 （1）-- render&components

render

基础用法

//1、创建虚拟DOM元素对象 
var vDom=<h1>hello wold!</h1>
//2、渲染 
ReactDOM.render(vDom,document.getElementById('box'))

react的API写法

var ele=React.createElement('h2',{id:'box1'},"设置id")
ReactDOM.render(ele,document.getElementById(('jsx1')))

加入动态数据的渲染

const id="box2";
const name="adoctors";
const age=18;
//动态的数据加{变量}
var vDom2=<h1 id={id}>name:{name},age:{age}</h1>
ReactDOM.render(vDom2,document.getElementById(('jsx2')))

列表渲染

错误做法：

const arr=["jquery","zepto","vue","angular","react","nodejs","php"]
var vDom3=<ul>
  	<li>{arr}</li>
</ul>
ReactDOM.render(vDom3,document.getElementById(('list')))   
//结果
 <ul>
	 <li>jqueryzeptovueangularreactnodejsphp</li>
 </ul>

正确做法：使用map方法,无key是容易警告

var vDom3=<ul>
	  	{arr.map((item,i)=><li key={i}>{item}</li>)}
	</ul>
ReactDOM.render(vDom3,document.getElementById(('list')))

components

组件一般分为两种：

第一种：工厂函数组件（也称：简单组件，即没有状态的组件）

//1、定义组件
function Myconponent(){
	return <h1>我是简单组件</h1>
}
//2、渲染组件标签
ReactDOM.render(<Myconponent />,document.getElementById(('com1')))

第二种：es6类组件（也称：复杂组件）

//1、定义组件
class Myconponent2 extends React.Component{
	render(){
		console.log(this)  //Myconponent2实例对象
		return <h1>我是复杂组件</h1>
	}
}
//2、渲染组件标签
ReactDOM.render(<Myconponent2 />,document.getElementById(('com2')))