一、react五大特点:
1. 声明式代码: react 面向数据编程,不需要直接去控制DOM,你只要把数据控制好,react 自己回去帮你操作dom,这就是声明式开发。(不在乎过程,只在乎结果,只在乎数据,不操作DOM)
2. 高效:react 通过对DOM 的模拟,最大限度地减少与DOM的交互
3. 灵活: react 可以与已知的库或框架很好的配合
4. JSX: JSX 是 JavaScript 语法的扩展(React 开发不一定使用 JSX ,但我们建议使用它。)
5. 组件化:通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中
组件化有两个显著的特点:
1)封装:一个组件所需的数据封装于组件内部;
2)组合:一个组件可以与其他组件通过组合的方式实现更加复杂的业务逻辑;
6. 单向数据流: React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。由上至下(DOM树),数据流更加清晰,组件状态更可控。(数据一层一层向下传递,不可逆)
PS: Vue 也是单向数据流,但有双向绑定功能。
二、组件
1. 工厂组件(简单组件):
<script>
function Simple () {
return <h2>简单组件</h2>
}
ReactDOM.render(<Simple />, document.getElementById('app'))
</script>
2. ES6 类组件(复杂组件):
<script>
class Complex extends React.Compooonent {
render() {
return <h2>复杂组件</h2>
}
}
ReactDOM.render(<Simple />, document.getElementById('app'))
</script>
注意: React 组件标签一定要闭合
三、
state: 组件内部定义的数据
props: 可在组件之间传递数据(父子组件)
兄弟组件之间不能直接通信,但我们可以通过父组件来实现间接通信。
state值修改后,一定要使用 setState(),否则 state 数据并不会改变
特别说明:页面的更新(render() 重新渲染),就是通过this.setState()来实现的。但是,调用setState() 不一定会重新渲染,比如生命周期函数。(这里防止面试时会考到)
看一个小例子:
<script type="text/babel">
class Complex extends React.Component {
constructor(props) {
super(props)
this.state = {
msg: 'hello react',
flag: true
}
}
click() {
const {flag} = this.state
this.setState({
flag: !flag
})
}
render() {
const {msg, flag} = this.state
let res = flag ? "Hello react" : "Bye! react"
return (
<div>
<h2>{msg}</h2>
<h3 onClick={this.click}>{res}</h3>
</div>
)
}
}
ReactDOM.render(<Complex />, document.getElementById('app'))
这里是想实现点击Hello react 时变成 Bye react.。但当你点击页面上的 "Hello react" 的时候,会报错,
原因在这里:
我们要注意 JSX 中this 的指向,这里就是 this 指向丢失造成的
解决方法有三种:
第一种:
说明:在 JavaScript中, 类方法默认是没有绑定 的。直接调用该函数时,this 是 undefined
第二种:
第三种: