接着React（一）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="div">
</div>
</body>
<script src="./common/react.js"></script>
<script src="./common/react-dom.js"></script>
<script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
<script type="text/babel">
</script>
</html>
JSX中的数组
在vue中，我们一般是在data中声明数组在标签中绑定变量使用，我们来看看react中的数组
<script type="text/babel">
let name=['React','Vue','Ag']
var HelloComponent = React.createClass({
render:function(){
return
}
})
ReactDOM.render(<HelloComponent/>,document.getElementById('div'))
</script>
这个格式要很熟悉了哈！
首先声明了一个数组，接下来我将它循环输出
<script type="text/babel">
let name=['React','Vue','Ag']
var HelloComponent = React.createClass({
render:function(){
return <div>
{}
</div>
}
})
ReactDOM.render(<HelloComponent/>,document.getElementById('div'))
</script>
上次说过 { } 代表表达式，可以是变量
<script type="text/babel">
let name=['React','Vue','Ag']
var HelloComponent = React.createClass({
render:function(){
return <div>
{
name.map(function(names){
return <h2 key={names}>Hello,{names}</h2>
})
}
</div>
}
})
ReactDOM.render(<HelloComponent/>,document.getElementById('div'))
map参数是一个函数，第一个参数是数组的每项值
此处也是需要key值，作用与vue类似，用来标识虚拟DOM，不写会报错哈
需要注意的是，render下方的return 后面必须有内容，如果没有则不渲染 这个是一个很基础的知识点，return代表函数的返回即结束
另一种表现
<script type="text/babel">
let arr=[
<h3 key="0">Hello React</h3>,
<h3 key="1">Hello Vue</h3>,
<h3 key="2">Hello Ag</h3>
]
ReactDOM.render(<div>{arr}</div>,document.getElementById('div'))
</script>
两者都比较常用，根据实际情况进行筛选
再看看表达式
其实我把表达式就是理解成了JS，是一个有返回值的JS，因为 JSX 的特性更接近 JavaScript 而不是 HTML
所以 React DOM 使用 camelCase 小驼峰命名 来定义属性的名称，而不是使用 HTML 的属性名称
例如，class 变成了 className，而 tabindex 则对应着 tabIndex
React 16 已经没有React.createClass方法，而用一个包 create-react-class 来代替
官方更加推荐 class Component extends React.Component的写法，也就是ES6的写法，不过其实就是相当于语法糖而已
let name=['React','Vue','Ag']
class HelloComponent extends React.Component{
render(){
return(
<div>
{
name.map(function(names){
return <h2 key={names}>Hello,{names}</h2>
})
}
</div>
)
}
}
ReactDOM.render(<HelloComponent/>,document.getElementById('div'))
也就是在创建DOM的时候其实官方更提倡使用createElement的方法
createClass，如其名就是创建React组件对应的类，描述你将要创建组件的各种行为，其中只有当组件被渲染时需要输出的内容的render接口是必须实现的，其他都是可选
createElement，创建React组件实例，支持type，config，children三个参数
createFactory，通过工厂方法创建React组件实例，在js里要实现工厂方法只需创建一个带type参数的createElement的绑定函数（这个暂时不管）
createElement
<script type="text/babel">
const element = React.createElement(
'h1',
{className: 'test'},
'Hello, world!'
);
ReactDOM.render(element,document.getElementById('div'))
</script>
在style中声明test样式即可生效
const element = (
<h1 className="test">
Hello, world!
</h1>
);
此代码与上方效果相同，注意的就是class，上面提过React DOM 使用 camelCase 小驼峰命名
<script type="text/babel">
var srcs='http://p0.so.qhimgs1.com/bdr/_240_/t014aee68343700722c.jpg'
const elements=<img src={src}/>
const element = React.createElement(
'img',
{src:srcs},
null
)
ReactDOM.render(element,document.getElementById('div'))
</script>
后面还是会使用createClass编写
网友评论