React学习记录1

1、why component？

a、将复杂的代码划分成更小更具体的组件、便于复用和维护。

b、相关的代码关联在一起，简化开发过程。

c、不同的组件做不同的事，便于维护。

2、JSX

JS的语法扩展，JS中混入HTML。

React函数组件，必备因素：1、是个函数。2、返回jsx

3、{ }

花括号里可以添加表达式

<img src={imgSrc} alt="图片" />

如图，src引入的是一个变量的话，就需要使用花括号。

4、props

父传子

//子组件，通过props接收数据
function Son(props) {
  return (
    <>
      {
        props.title
      }
    </>
  )
}
//父组件，在子组件上携带数据
function Dad() {
  return (
    <>
      <Son title="huyu"></Son>
    </>
  )
}

子传父

//父组件 传递一个方法
function Dad() {
  const look = (msg) => {
    console.log(msg);
  }
  return (
    <>
      <Son getMessage={look}></Son>
    </>
  )
}
//子组件。触发相应的回调，传递值给父组件
function Son(props) {
  const sendMessage = (val) =>{ 
    props.getMessage(val)
  }
  return (
    <>
      <button onClick={() => sendMessage(123)}>123</button>
    </>
  )
}