Question

function Greeting(props){     
    return <h1>{props.name}</h1>;
}  

var name = "Henok"; 

setTimeout( () => {name="Rahel";},2000);

ReactDOM.render(<Greeting name={name} />, document.getElementById('root'));

据我所知，React组件会在传递给它的道具已修改或状态更改。

即使我将名称更改为Rahel，在浏览器中也看不到消息Rahel？

如果我的假设是错误的，React组件在什么情况下会发生更新生命周期挂钩？

Answer 1

Henok，您好像要在React之外更改值！您可以这样做：

class Greeting extends Component{
    state ={
        name: 'henok'
    }

    componentDidMount(){
       setTimeout(()=> this.setState({name:'Rachel'}), 3000)
    }

    render(){
       const {name} = this.state;
       return(<p>Hello {name} </p>);
    }
}

Answer 2

嘿，您有个正确的主意，但是React的做法有点不同。

尝试执行以下操作：

import * as React from 'react'

function App(){
    const [name, setName] = React.useState('Henok')

    const changeName = () => setName('Rahel')

    React.useEffect(() => {
       setTimeout(() => {
          changeName()
       }, 2000);
    }, [])

    return <Greeting name={name} />
} 


function Greeting(props){     
    return <h1>{props.name}</h1>;
}  


ReactDOM.render(<App />, document.getElementById('root'));

当传递给它的道具发生变化时，为什么React组件没有更新？

2 个答案: