react基础
react基础一
1. 组件三大属性
state
state 为组件的内部数据。类似 vue 中的 data;
注意:状态必须通过 setState
进行更新。更新是合并,而不是替换。更新状态有两种方式。
// 对象方式
this.setState({
count: this.state.count + 1
})
// 函数方式
this.setState(state => ({ count: this.state.count + 1 }))
props
prop 是外部传给组件的数据。
注意:引入 prop-types ,可以对传入的数据进行限制。
// 对外部传入的 name,sex,age 进行限制
static propTypes = {
name:PropTypes.string.isRequired, //限制name必传,且为字符串
sex:PropTypes.string,//限制sex为字符串
age:PropTypes.number,//限制age为数值
}
ref
react组件通过组件标签的ref属性,获取DOM元素。共有三种方式:
- 方式一:字符串形式
export default class App extends Component {
showData = ()=>{
alert(this.refs.input1.value) // 调用方式 this.refs.xxx
}
render(){
return (
<div>
<input ref=‘input1‘ placeholder=‘点击按钮展示输入框的数据‘/>
<button onClick={this.showData}>click</button>
</div>
)
}
}
- 方式二:回调函数方式
export default class App extends Component {
showData = ()=>{
alert(this.input1.value) // 调用方式 this.xxx
}
render(){
return (
<div>
<input ref={c => this.input1 = c} placeholder=‘点击按钮展示输入框的数据‘/>
<button onClick={this.showData}>click</button>
</div>
)
}
}
- 方式三:createRef 方式
export default class App extends Component {
// React.createRef调用后可以返回一个容器,该容器可以存储被ref所标识的节点,该容器是“专人专用”的
ref1 = React.createRef()
showData = ()=>{
alert(this.ref1.current.value) // 调用方式 this.ref1
}
render(){
return (
<div>
<input ref={this.ref1} placeholder=‘点击按钮展示输入框的数据‘/>
<button onClick={this.showData}>click</button>
</div>
)
}
}
2. react中的事件处理
- react中使用的自定义的事件,而不是原生的DOM事件。例如:onClick(注意大小写)
- react中的事件是通过事件委托方式处理的,委托给组件的最外层元素
3.受控组件和非受控组件
- 受控组件:受控组件就是被 react 状态控制的组件
- 非受控组件:在 react 中,input,textarea 等组件默认是非受控组件
- 非受控组件转化为受控组件:通过 onChange 事件获取到当前输入的内容,将当前输入的内容作为 value 传入
4. react 的生命周期
react 的生命周期分为三个阶段;
初始化阶段:
-
constructor()
-
getDerivedStateFromProps
-
render()
-
componentDidMount(): 一般做初始化事情:开启定时器、发送网络请求、订阅消息
更新阶段:
- getDerivedStateFromProps
- shouldComponentUpdate()
- render()
- getSnapshotBeforeUpdate
- componentDidUpdate()
卸载组件:由ReactDOM.unmountComponentAtNode()触发
- componentWillUnmount():一般做收尾工作:关闭定时器,取消订阅
5. react 的路由
首先说一下路由中基本概念:
-
什么是路由组件和一般组件?
- 路由组件: 一般这样写
<Demo/>
;存放在 pages 文件夹下;接收到的 props 为组件标签传递的的东西; - 一般组件:一般
<Route path="/demo" component={Demo}/>
;存放在 components 文件夹下;接收到的 props 为三个固定的属性:history,location,match
- 路由组件: 一般这样写
-
Switch 的作用?
Switch 可以提高路由匹配效率,单一匹配
-
路由的匹配方式:严格匹配和模糊匹配
默认是模糊匹配。路由组件上增加exact
就是严格匹配。例如:<Route exact={true} path="/about" component={About}/>
注意:严格匹配不要顺便开启,可能会导致二级路由无法匹配的问题。
-
Redirect 的作用?
一般写在所有路由注册的最下方,当所有路由都无法匹配时,跳转到Redirect指定的路由。
-
嵌套路由
注册子路由时,要写上父路由的 path 值。
-
路由组件的参数传递
-
params参数
-
路由链接(传递参数):
<Link to=‘/demo/test/tom/18‘}>详情</Link>
-
注册路由(声明接收):
<Route path="/demo/test/:name/:age" component={Test}/>
-
接收参数:this.props.match.params
-
-
search参数
- 路由链接(传递参数):
<Link to=‘/demo/test?name=tom&age=18‘}>详情</Link>
- 注册路由(无需声明):
<Route path="/demo/test" component={Test}/>
- 接收参数:this.props.location.search
- 备注:获取到的search是urlencoded编码字符串,需要借助querystring解析
- 路由链接(传递参数):
-
state参数
-
路由链接(传递参数):
<Link to={{pathname:‘/demo/test‘,state:{name:‘tom‘,age:18}}}>详情</Link>
-
注册路由(无需声明):
<Route path="/demo/test" component={Test}/>
-
接收参数:this.props.location.state
-
-
-
BrowserRouter与HashRouter的区别
- BrowserRouter使用的是H5的history API,不兼容IE9及以下版本。HashRouter使用的是URL的哈希值。
- 刷新后对路由state参数的影响?
- BrowserRouter没有任何影响,因为state保存在history对象中。
- HashRouter刷新后会导致路由state参数的丢失!
-
编程式路由导航
借助this.props.history对象上的API对操作路由跳转、前进、后退。
例如:this.prosp.history.push()
-
withRouter 的作用
withRouter可以加工一般组件,让一般组件具备路由组件所特有的API。