目录
安装
首先需要确保NodeJS在较新的版本,输入以下命令可以下载搭建本地环境。
npx create-react-app my-app
进入项目目录cd my-app
后输入命令 npm start
启动项目。
概念
JSX
JSX是JavaScript中的语法拓展,在React中配合使用。
const ele = <h1>Hello World</h1>;
ReactDOM.render(
ele,
document.getElementById('root')
);
JSX也是一个表达式,我们可以使用if语句或者for语句
ReactDOM.render(ele(false),
document.getElementById('root')
);
function ele(bool){
if(bool){
return <h1>Hello World</h1>
}
return <h1>Sorry</h1>
}
JSX遵循XML规范,必须有闭合标签,JSX最终会被Babel给转义React.createElement()函数调用。
渲染
React对象是一个不可变的对象,已经创建,就无法更改,我们需要重新使用ReactDOM.render()函数将元素渲染到文档中。
ReactDOM.render(el,Node);
ReactDOM更新前会与之前的状态比较,它会更新它需要更新的部分。
组件
我们可以直接使用函数的形式定义组件,props用于接收自定义属性。
// Ele.js
import React from 'react'
export default function Ele(props){
if(props.bool){
return <h1>Hello World</h1>
}else{
return <h1>Sorry</h1>
}
}
也可以使用ES6中的Class来定义组件,this.props用于接收自定义属性。
// Ele.js
import React , { Component } from 'react'
export default class Ele extends Component{
render(){
if(this.props.bool){
return <h1>Hello World</h1>
}else{
return <h1>Sorry</h1>
}
}
}
我们在首页中导入这个组件,并且我们可以自定义传递属性。
import Ele from './Ele'
React.render(<div>
<Ele bool={true}>
</div>,document.getElementById('root'))
状态
每个组件都有自己的状态管理,其本质就是一个属性。
import React, { Component } from 'react'
export default class Tick extends Component {
constructor(props){
super(props);
this.state = {
left: props.number
}
}
render() {
return (
<div>
{this.state.left}
</div>
)
}
}
在constructor下可以使用this.state设置组件的状态,状态改变将触发render()函数,如下一个计时器的Dome,我们不能够直接去改变状态中的数据,否则React会检测不到数据的变化,必须使用this.setState({})改变数据。
import React, { Component } from 'react'
export default class Tick extends Component {
constructor(props){
super(props);
this.state = {
left: props.number
}
this.timer = setInterval(() => {
this.setState({
left : this.state.left -1
})
if(this.state.left == 0){
clearInterval(this.timer)
}
}, 1000);
}
render() {
return (
<div>
倒计时剩余时间{this.state.left}
</div>
)
}
}
事件
在react中,组件的事件本质上是一个属性,我们可以通过以下两种方式绑定事件。
function handleClick(e){
console.log(e)
console.log("点击了");
}
const btn = <button onClick={handleClick} onMouseEnter = {(e)=>{
console.log("移入了",e)
}}>点击</button>
ReactDOM.render(btn,document.getElementById("root"))
生命周期
react的生命周期分为三个阶段,挂载阶段,更新阶段,销毁阶段。
挂载阶段
初始化阶段 constructor()
constructor(props){
super(props);
this.state = {
n : 0
}
console.log("constructor","一个新的组件诞生了!!")
}
初始化属性和状态,此时不允许使用setState,因为组件尚未挂载,setState会去调用render()函数。
即将挂载阶段 componentWillMount()
componentWillMount(){
console.log("componentWillMount","组件即将被挂载")
}
即将挂载到页面时组件渲染虚拟DOM,触发render()函数渲染页面
虚拟DOM render()
render() {
console.log("render","渲染,返回的react元素经过React.createElement方法挂载到虚拟的DOM树上")
return (
<div>Hello World</div>
)
}
挂载完成 componentDidMount()
componentDidMount(){
console.log("componentDidMount","挂载完成")
}
此时虚拟DOM已经变成了正式的DOM
更新阶段
接受到新的属性值 componentWillReceiveProps()
componentWillReceiveProps(nextProps){
console.log("componentWillReceiveProps","接收到新的属性值",this.props,nextProps)
}
是否更新渲染 shouldComponentUpdate()
shouldComponentUpdate(nextProps,nextState){
// return false 最暴力的,直接不让重新渲染
console.log("shouldComponentUpdate","是否应该重新渲染",nextProps,nextState)
if(this.props.n === nextProps.n && this.state.n === nextState.n){
return false;
}
return true;
}
组件重新渲染 componentWillUpdate()
componentWillUpdate(nextProps,nextState){
console.log("componentWillUpdate","组件即将被重新渲染",nextProps,nextState)
}
虚拟DOM render()
render() {
console.log("render","渲染,返回的react元素经过React.createElement方法挂载到虚拟的DOM树上")
return (
<div>Hello World</div>
)
}
完成渲染 componentDidUpdate()
componentDidUpdate(prevProps,prevState){
console.log("componentDidUpdate","组件已经重新渲染完成",prevProps,prevState)
}
销毁阶段
销毁 componentWillUnmount()
componentWillUnmount(){
console.log("componentWillUnmount","组件被销毁")
}