目录
state是内部属性,props是为了更好地实现复用性,从外部接收数据。
1、componentWillReceiveProps(nextProps)
2、shouldComponentUpdate(nextProps,nextState)
5、componentDidUpdate(preProps,preState,value)
React组件
组件介绍:组件化概念、代表页面中的某部分及功能、独立可复用
一、两种创建方式
函数组件
1、使用JS函数创建的组件
2、函数名必须大写开头
3、组件必须有返回值
例如:
function Hello() {
return (
<div>333333</div>
)
}
ReactDOM.render(<Hello/>,document.getElementById("root"))
类组件
1、类名大写开头
2、类组件应继承 React.Component 父类
3、类组件必须提供 render() 方法
4、render() 必须有返回值
例如:
class Ok extends React.Component {
render() {
return (
<div>ok</div>
)
}
}
ReactDOM.render(<OK/>, document.getElementById("root"))
二、将组件放在独立的js文件中
步骤:
1、创建组件js文件,eg: Book.js;
2、在Book.js文件中导入React;
3、实用类或者函数创建组件;
4、组件必须要导出才能使用;
5、在指定的文件中导入Book.js;
6、渲染组件。
例如:
Book.js
// Book.js
import React from 'react'
class Book extends React.Component {
render() {
return(
<h1>读书明智</h1>
)
}
}
// 导出
export default Book
index.js
import Book from './Book'
ReactDOM.render(<Book/>,document.getElementById("root"))
三、组件的样式
1、行内样式
2、外部导入
(1)准备好外部 CSS 文件,在 js 中使用import引入
注意:class属性建议写为className
四、ref 获取 dom
<p ref='myword'>你好</p>
可以通过 this.refs.myword 获取p标签
注:refs 将要被弃用,在严格模式下会报错
新写法:
myRef = React.createRef();
<div ref={this.myRef}></div>
如果 ref 绑定到组件上,我们会获得这个组件。
五、列表渲染(一中有记,这里就省略)
六、条件渲染
1、{ 条件 ?<p>yes</p> : <p>no</p> }
2、{ 条件 && <p>ok</p> }
七、事件处理
1、事件绑定
on+事件名称={fn} 注:这里要用驼峰命名法
例如:
<button onClick={this.myclick}>1</button>
<button onClick={()=>{
console.log(this);
}}>1</button>
八、状态 state
设置 state 的组件称之为有状态组件,没有设置 state 的组件称之为无状态组件。
组件中的数据
例如:
1、
class A extends Component {
state = {key:value}
}
2、
class A extends Component {
constructor() {
super();
this.state = {
key: value
}
}
}
注意:
(1)在类中定义 state (只能写这个名字) 对象--------state = {key:value};
(2)不要直接修改 state : this.state.ok='ok' -------- 使用setState({key:value})
(3)setState注意:
在同步逻辑中,异步更新状态与真实dom;
在异步逻辑中,同步更新状态与真实dom;
接受第二个参数,是个回调函数,在这里状态与dom更新完毕。
九、属性props(只读)
state是内部属性,props是为了更好地实现复用性,从外部接收数据。
1、某组件:
{/*属性*/}
<MyNav title={this.title} leftBtn={isShowLeft}/>
2、MyNav.js:
render() {
let {title,leftBtn} = this.props;
return (
<div>
{leftBtn && <button>left</button>}
<p>{title}</p>
</div>
)
}
属性验证:
import myprop from 'prop-types'
static propTypes = {
title:myprop.string,
leftBtn:myprop.bool
}
默认属性:
static defaultProps = {
title:'标题'
}
属性与状态总结:
(1)属性是父组件对子组件的数据传输与操作;
(2)状态是组件自己内部的数据。
十、生命周期(钩子函数)
只有类组件(函数组件需要hooks支持)
初始化阶段
1、componentWillMount
组件即将挂载,render 之前最后一次修改 state 的机会;
常用于:state的初始化;
备注:如果有警告,可使用 UNSAFE_componentWillMount ;
2、render
只能访问 props 于 state ,不能修改 state 及进行 dom 输出;
3、componentDidMount
成功执行完毕 render 并完成 dom 节点的渲染,可以对dom 进行修改;
常用于:axios请求,订阅函数调用,计时器,dom操作;
运行中阶段
1、componentWillReceiveProps(nextProps)
父组件修改属性触发;
最先获取父组件传来的属性,可以在这里进行 axios 请求或者其他逻辑处理;
备注:如果有警告,可使用 UNSAFE_componentWillReceiveProps ;
2、shouldComponentUpdate(nextProps,nextState)
返回false,会阻止render的调用;
参数是被修改之后新的属性及状态;
3、componentWillUpdate
组件将要更新,不能修改属性及状态;
备注:如果有警告,可使用 UNSAFE_componentUpdate ;
4、render 同初始化中的render
5、componentDidUpdate(preProps,preState,value)
可以修改 dom;
参数是被修改之前的属性及状态;
销毁阶段
1、componentWillUnmount
再删除组件前进行清理工作。