不常见的面试题

554 阅读1分钟

React

1.子组件的props的值分别通过一下方式进行初始化赋值:

// 
1. const [title2, setstate] = useState(props.title)

2. const { title } = props 

那么现在改变父组件中 title的值, 子组件的值是否会同步更新?

const { title } = props 会同步更新 这里是值的引用

const [title2, setstate] = useState(props.title) 这里不会同步更新, 因为useState 每次得到的都说一个新值

全部代码如下:

// 父组件
import Data from '../components/data'

export default function index() {
   const [title, setTitle] = useState('测试')


    setTimeout(()=> {
      setTitle('测试1')
    },2000)
  return (
    <div>
        父组件
        <Data title={title}></Data>
    </div>
  )
}
// 子组件
export default function data(props) {

    const [title2, setstate] = useState(props.title)

    const { title } = props
     
    useEffect(() => {
        
        console.log(title + 'title')
       
    }, [title])

    useEffect(() => {
        console.log(title2 + 'state')  
    }, [title2])
    
    return (
        <div>
            {title}--- title <br />   {/* 实时更新 */} 
            {title2} --- title2       {/* 非实时更新 */} 
        </div>
    )
}