什么是 JSX 语法
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
为什么要使用 JSX
！！！注：如果使用的时 JSX 语法一定要引入 babel.js 文件，还要在 script 标签上声名 style=“text/babel” 这样浏览器才能把 JSX 的语法编译成功 。
添加 style=“text/babel” 的作用是为了让浏览器使用 babel 转移后在编译
他可以让我们在 js 中直接写标签来定义模板
JSX 语法规范
jsx语法规则：
- 定义虚拟DOM时，不要写引号。
- 标签中混入JS表达式时要用{}。
- 样式的类名指定不要用class，要用className。
- 内联样式，要用style={{key:value}}的形式去写。
- 只能有一个根标签
- 标签必须闭合
- 标签首字母
1) 若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
2) 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。
React 生命周期
什么是声名周期函数
声名周期是 React 提前定义好的一些固定时间地点调用的函数。
我们需要在某个特定时间或地点做一些事情的时候可以可以找到对应的生命周期函数写出来并在其中执行需要进行的操作。
React 生命周期 旧版本 （16.0.0版本）
React 生命周期 旧版本 结构图
React 生命周期 旧 内容
- 初始化阶段: 由ReactDOM.render()触发—初次渲染
1. constructor() // 构造器
2. componentWillMount() // 组件将要挂载的钩子
3. render() // 渲染
4. componentDidMount() =====> 常用 // 组件挂载完毕的钩子
一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求- 更新阶段: 由组件内部this.setSate()或父组件render触发
1. shouldComponentUpdate() // 控制组件更新的“阀门”
shouldComponentUpdate钩子函数必须有一个返回值，返回值为 true 或 false
在不定义 shouldComponentUpdate 函数的时候 React 会默认返回为true
如果定义后就必须手动返回一个true 或 false
为true的情况下为正常放行为false的情况下会阻止下面数据更新的进程
2. componentWillUpdate() // 组件将要更新的钩子
3. render() =====> 必须使用的一个 // 渲染
4. componentDidUpdate() // 组件更新完毕的钩子- 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
1. componentWillUnmount() =====> 常用 // 组件将要卸载的钩子
一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息
React 声名周期 旧 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react生命周期(旧)</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
//创建组件
class Count extends React.Component{
//构造器
constructor(props){
console.log('构造器');
super(props)
//初始化状态
this.state = {count:0}
}
//加1按钮的回调
add = ()=>{
//获取原状态
const {count} = this.state
//更新状态
this.setState({count:count+1})
}
//卸载组件按钮的回调
death = ()=>{
ReactDOM.unmountComponentAtNode(document.getElementById('test'))
}
//强制更新按钮的回调
force = ()=>{
this.forceUpdate()
}
//组件将要挂载的钩子
componentWillMount(){
console.log('组件将要挂载的钩子');
}
//组件挂载完毕的钩子
componentDidMount(){
console.log('组件挂载完毕的钩子');
}
//组件将要卸载的钩子
componentWillUnmount(){
console.log('组件将要卸载的钩子');
}
//控制组件更新的“阀门”
shouldComponentUpdate(){
console.log('控制组件更新的“阀门”');
return true
}
//组件将要更新的钩子
componentWillUpdate(){
console.log('组件将要更新的钩子');
}
//组件更新完毕的钩子
componentDidUpdate(){
console.log('组件更新完毕的钩子');
}
render(){
console.log('Count---render');
const {count} = this.state
return(
<div>
<h2>当前求和为：{count}</h2>
<button onClick={this.add}>点我+1</button>
<button onClick={this.death}>卸载组件</button>
<button onClick={this.force}>不更改任何状态中的数据，强制更新一下</button>
</div>
)
}
}
//父组件A
class A extends React.Component{
//初始化状态
state = {carName:'奔驰'}
changeCar = ()=>{
this.setState({carName:'奥拓'})
}
render(){
return(
<div>
<div>我是A组件</div>
<button onClick={this.changeCar}>换车</button>
<B carName={this.state.carName}/>
</div>
)
}
}
//子组件B
class B extends React.Component{
//组件将要接收新的props的钩子
componentWillReceiveProps(props){
console.log('B---组件将要接收新的props的钩子',props);
}
//控制组件更新的“阀门”
shouldComponentUpdate(){
console.log('B---控制组件更新的“阀门”');
return true
}
//组件将要更新的钩子
componentWillUpdate(){
console.log('B---组件将要更新的钩子');
}
//组件更新完毕的钩子
componentDidUpdate(){
console.log('B---组件更新完毕的钩子');
}
render(){
console.log('B---render');
return(
<div>我是B组件，接收到的车是:{this.props.carName}</div>
)
}
}
//渲染组件
ReactDOM.render(<Count/>,document.getElementById('test'))
</script>
</body>
</html>
React 生命周期 新版本 （17.0.0版本）
React 生命周期 新版本 结构图
React 生命周期 新 内容
- 初始化阶段: 由ReactDOM.render()触发—初次渲染
1. constructor() // 构造器
2. getDerivedStateFromProps // 若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps
3. render() // 渲染
4. componentDidMount() =====> 常用
一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求- 更新阶段: 由组件内部this.setSate()或父组件重新render触发
1. getDerivedStateFromProps // 若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps
2. shouldComponentUpdate() // 控制组件更新的“阀门”
shouldComponentUpdate钩子函数必须有一个返回值，返回值为 true 或 false
在不定义 shouldComponentUpdate 函数的时候 React 会默认返回为true
如果定义后就必须手动返回一个true 或 false
3. render() // 渲染
4. getSnapshotBeforeUpdate // 在更新之前获取快照
5. componentDidUpdate() // 组件更新完毕的钩子- 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
1. componentWillUnmount() =====> 常用 // 组件将要卸载的钩子
一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react生命周期(新)</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/17.0.1/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/17.0.1/babel.min.js"></script>
<script type="text/babel">
//创建组件
class Count extends React.Component{
//构造器
constructor(props){
console.log('构造器');
super(props)
//初始化状态
this.state = {count:0}
}
//加1按钮的回调
add = ()=>{
//获取原状态
const {count} = this.state
//更新状态
this.setState({count:count+1})
}
//卸载组件按钮的回调
death = ()=>{
ReactDOM.unmountComponentAtNode(document.getElementById('test'))
}
//强制更新按钮的回调
force = ()=>{
this.forceUpdate()
}
//若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps
static getDerivedStateFromProps(props,state){
console.log('getDerivedStateFromProps',props,state);
return null
}
//在更新之前获取快照
getSnapshotBeforeUpdate(){
console.log('在更新之前获取快照');
return '张三'
}
//组件挂载完毕的钩子
componentDidMount(){
console.log('组件挂载完毕的钩子');
}
//组件将要卸载的钩子
componentWillUnmount(){
console.log('组件将要卸载的钩子');
}
//控制组件更新的“阀门”
shouldComponentUpdate(){
console.log('控制组件更新的“阀门”');
return true
}
//组件更新完毕的钩子
componentDidUpdate(preProps,preState,snapshotValue){
console.log('组件更新完毕的钩子',preProps,preState,snapshotValue);
}
render(){
console.log('Count---render');
const {count} = this.state
return(
<div>
<h2>当前求和为：{count}</h2>
<button onClick={this.add}>点我+1</button>
<button onClick={this.death}>卸载组件</button>
<button onClick={this.force}>不更改任何状态中的数据，强制更新一下</button>
</div>
)
}
}
//渲染组件
ReactDOM.render(<Count count={199}/>,document.getElementById('test'))
</script>
</body>
</html>
React声名周期新旧区别
在新的声名周期中去掉了 3 个旧的声名周期函数， 新增了 2 个生命周期函数
去掉的三个旧的声名周期函数
componentWillMount() // 组件将要挂载的钩子
componentWillUpdate() // 组件将要更新的钩子
componentWillReceiveProps // 组件将要接收新的props的钩子
！！！注：并非完全去除不可使用 因为在后期18版本的更新才打算去除
现在要想使用他们三个需要给前面加上 UNSAFE_ 才可以调用
例如：
UNSAFE_componentWillUpdate()
新增的两个生命周期函数
getDerivedStateFromProps // 若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps
getSnapshotBeforeUpdate // 在更新之前获取快照
总结
本片文章讲述了
- JSX 的用法和规则接收
- React 新旧两版生命周期的使用方法和区别
扫一扫
2281
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
