对React也是学习一段时间了,都是从其他的大神博客(例如阮一峰老师的React入门)、购买的React实战书籍,React网络教学视频(填鸭式教学适合什么都不懂的小白)等渠道学习使用的,现在也算是入门了。
学来学去最后发现React的官方文档竟然还没有通读一遍:(
React给的第一个例子是不用jsx语法的,今天菜发现。以下是具体实现
/src
/js
like_button.js
index.html
like_button.js
'use strict'
const e = React.createElement //React创建React Element 的方法
const Component = React.Component //React组件类型
class LikeButton extends Component {
constructor(props) {
super(props)
this.state = { liked: false } //设置初始状态
}
render() { //组件渲染方法,当组件的状态或者props的改变满足渲染条件时,组件会调用render重新渲染组件
if (this.state.liked) { //判断状态的属性值。如果有多行语句使用this.state向外取值,可以使用解构赋值来简化部分代码,如(let {liked} = this.state)
return 'you liked this' //返回一个文本节点
}
//非jsx实现方式
return e( //使用前边保存的构造react element方法创建一个button按钮,第二个对象参数为这个按钮添加了一个click方法,按钮文本为Like(第三个参数)
'button',
{ onClick: () => this.setState({ liked: true }) },
'Like'
)
}
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id='root'></div>
</body>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin> </script>
//crossorigin html5的新的属性(值为anonymous|use-credentials),用来处理跨域的一些操作,详情请参照MDN的描述
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="./js/like_button.js"></script>
<script type='text/javascript'>
//非jsx实现方式
//官方栗子将以下的添加到DOM的操作放在了like_button.js的底部,为了这个组件文件作为一个单一组件的纯粹性,我将添加操作调整到了index.html中
ReactDOM.render(React.createElement(LikeButton) , document.querySelector('#root'))
</script>
</html>