1. 状态提升
1.1 状态提升说明
- 目前为止,已经了解了每个组件都有自己的状态state,通过setState修改状态触发渲染
- 也了解了父组件可以通过props将数据传递给子组件
- props属性不仅可以传递普通的数据,还是传递函数, 这样就可以在子组件中执行父组件中的函数
- 并且在父组件函数中修改父组件自己的数据
- 那么非父子组件如何传递参数呢,这个时候就需要用到状态提升
- 将兄弟组件都需要用到的状态存放在共同的父组件中,这就是状态提升
2.状态提升图
2.1 组件维护组件自己的状态
说明:
每个组件都有自己的状态
组件难以去修改别的组件的状态,
图中如果想点击button按钮改变主题颜色,也就是
Title和Button两个组件颜色都改变如果
Title和Button组件都维护自己组件的状态state就不太好传递数据
组件图:
状态提升.png
2. 2. 将状态提升到共同的父组件中
- 状态提升就是将状态提升到共同的父组件中
- 父组件在通过props下发state状态数据给每一个子组件使用
- 父组件通过props下发一个父组件APP的方法给
Button子组件 - 这样Button子组件就可以通过父组件传递过来的方法修改父组件的状态
- 父组件状态一变,就会触发重新渲染, 每一个子组件都将获取最新的数据进行渲染
状态提升2.png
2.3. 示例代码
组件状态提升与方法下发的示例代码:
// 创建组件
// title组件
class Title extends React.Component{
constructor(){
super()
}
render(){
let {color} = this.props
return (
<h3 style={{color: color}}>这是一个标题</h3>
)
}
}
// Button 组件
class Button extends React.Component{
constructor(props){
super(props)
}
render(){
let {color,handleClick} = this.props
return (
<div>
<button
style={{color:color}}
type="button"
onClick={() => {
handleClick("blue")
}}
>
蓝色主题
</button>
<button
style={{color:color}}
type="button"
onClick={() => {
handleClick("green")
}}
>
绿色主题
</button>
</div>
)
}
}
// APP 组件
class App extends React.Component{
constructor(){
super()
this.state = {
themeColor: 'blue'
}
}
handleClick(color){
console.log(this)
this.setState({
themeColor: color
})
}
render(){
let {themeColor} = this.state
return (
<div>
<Title color={themeColor}/>
<Button
handleClick={(color) => this.handleClick(color)}
color={themeColor}/>
</div>
)
}
}
// 渲染组件
ReactDOM.render(<App /> , document.getElementById(('root')))
3. React条件渲染
跟JavaScript一样,通过条件运算符来判断是否显示不同的组件
3.1 条件渲染说明:
- 在JSX语法中
{}内部是JavaScript表达式 - 因此就可以在
{}中使用JavaScript中的条件运算符来判断是否显示某个组件 - 比较常用的是三目运算符
3.2 render函数中判断
说明:
- 每次组件状态的改变都会触发render函数的重新执行
- 因此我们可以在render函数中,通过if条件判断,返回不同的组件,保存在变量中
- 在return的JSX语法中使用这个变量来表示组件, 这样切换组件的显示
示例代码如下:
// 添加内容组件
function ShowA(){
return <h2>This is ShowA Component</h2>
}
function ShowB(){
return <h2>This is ShowB Component</h2>
}
// 渲染组件
class App extends React.Component{
constructor(){
super()
this.state = {
isShowA : true
}
}
render(){
let {isShowA } = this.state;
// 定义保存组件的变量
let showComponent = null
// 更加条件的不同,变量中赋值不同的组件
if(isShowA){
showComponent = <ShowA />
}else{
showComponent = <ShowB />
}
// 也可以简写如下
// showComponent = isShowA ? <ShowA /> : <ShowB />
return (
<div>
{/* 显示代表不同组件的变量 */ }
{ showComponent }
<button
type="button"
onClick={() => this.setState({isShowA: !isShowA})}
>点击显示组件{isShowA? "B" : "A"}</button>
</div>
)
}
}
// 将组件渲染到页面上
ReactDOM.render(<App /> ,document.getElementById("root"))
3.3. JSX语法中判断如何显示组件
说明:
- 在JSX语法中
{}中为JS表达式 - 因此可以在这表达式中直接通过三目运算符判断如何显示组件
示例代码
// 添加内容组件
function ShowA(){
return <h2>This is ShowA Component</h2>
}
function ShowB(){
return <h2>This is ShowB Component</h2>
}
// 渲染组件
class App extends React.Component{
constructor(){
super()
this.state = {
isShowA : true
}
}
render(){
let {isShowA } = this.state;
return (
<div>
{/* 在JSX中判断如何显示组件 */}
{isShowA ? <ShowA />: <ShowB />}
<button
type="button"
onClick={() => this.setState({isShowA: !isShowA})}
>点击显示组件{isShowA? "B" : "A"}</button>
</div>
)
}
}
// 将组件渲染到页面上
ReactDOM.render(<App /> ,document.getElementById("root"))
3.4 render函数中判断和JSX中判断有何不同
- 在JSX中
{}内部不能使用if..else处理逻辑判断 - 因此render函数中
if判断中就可以在判断以后处理比较复杂的逻辑, - 如果是三目判断, 两者没有区别
