一、ReactDOM.render
ReactDOM.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点。
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的语法,它允许 HTML 与 JavaScript 的混写
JSX 的基本语法规则:遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;遇到代码块(以 { 开头),就用 JavaScript 规则解析。
ReactDOM.render
功能就是把组件渲染并且构造 DOM 树,然后插入到页面上某个特定的元素上(在这里是 id 为 root 的 div 元素)。
关于JSX,记住:
1. JSX 是 JavaScript 语言的一种语法扩展,长得像 HTML,但并不是 HTML。
2. React.js 可以用 JSX 来描述你的组件长什么样的。
3. JSX 在编译的时候会变成相应的 JavaScript 对象描述。
4. react-dom 负责把这个用来描述 UI 信息的 JavaScript 对象变成 DOM 元素,并且渲染到页面上。
例如:下面是JS部分的代码
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import './index.css'
class Header extends Component {
render () {
return (
<div>
<h1>hello Armor</h1>
</div>
)
}
}
ReactDOM.render(
<Header />,
document.getElementById('root')
)
在上面这个示例中,需要一个HTML部分,只用给div中添加相应的id,
<div id='root'>
</div>
然后在JS代码里面,定义一个Header继承Component
类,用render方法返回一段HTML,这段HTML写入ReactDOM.render
中即可插入到id为’root’的html上进行渲染
二、表达式插入
用花括号{}可以插入javascript的表达式、函数、变量、表达式计算、函数执行等,render
会把这些代码返回的内容如实地渲染到页面上,也可以用在标签的属性上,例如:className={className}
注意:直接使用 class
在 React.js 的元素上添加类名如 <div class=“xxx”>
这种方式是不合法的。因为 class 是 JavaScript 的关键字,所以 React.js 中定义了一种新的方式:className
来帮助我们给元素添加类名。
还有一个特例就是 for 属性,例如 <label for='male'>Male</label>
,因为 for 也是 JavaScript 的关键字,所以在 JSX 用 htmlFor
替代,即 <label htmlFor='male'>Male</label>
。
而其他的 HTML 属性例如 style 、data-* 等就可以像普通的 HTML 属性那样直接添加上去。
三、事件监听
给需要监听事件的元素加上属性类似于 onClick、onKeyDown 这样的属性,定义点击事件,onClick
紧跟着是一个表达式插入值
class Title extends Component {
handleClickOnTitle () {
console.log('Click on title')
}
render () {
return (
<h1 onClick={this.handleClickOnTitle}>react</h1>
)
}
}
ReactDOM.render(
<Title/>,
document.getElementById('root')
)
如果你想在事件函数当中使用当前的实例,你需要手动地将实例方法 bind
到当前实例上再传入给 React.js。
四、组件的state和setState
class LikeButton extends Component {
constructor () {
super ()
this.state = { isLiked: false}
}
handleClickOnLikeButton () {
this.setState({
isLiked: !this.state.isLiked
})
}
render () {
return (
<button onClick={this.handleClickOnLikeButton.bind(this)}>
{this.state.isLiked ? '取消' : '点赞'}hhh
</button>
)
}
}
class Index extends Component {
render () {
return (
<div>
<LikeButton/>
</div>
)
}
}
ReactDOM.render(
<Index/>,
document.getElementById('root')
)
setState
方法由父类 Component 所提供。当我们调用这个函数的时候,React.js 会更新组件的状态 state ,并且重新调用 render 方法,然后再把 render 方法所渲染的最新的内容显示到页面上。
注意,当我们要改变组件的状态的时候,不能直接用 this.state = xxx 这种方式来修改,如果这样做 React.js 就没办法知道你修改了组件的状态,它也就没有办法更新页面。所以,一定要使用 React.js 提供的 setState 方法,它接受一个对象或者函数作为参数。