React函数式组件 -函数式组件传值、常用hook的使用(useState、seEffect、useRef)

函数式组件

顾明思义，函数就是组件，组件就是一个函数。
函数式组件长啥呢？没错，就是如下面这样的

function App(){
   
   return (
       <div>hello,nice to meet you</div>
   );
}

1、看看函数式组件有哪些特点？

• 组件的第一个参数是props，它是不可改变的，函数不能更改输入参数(接收父级传来的信息)
• 组件中return必须写(定义该组件要渲染的内容)
• 生命周期，无this，无state
• 单向数据流(数据必须从较高的组件流向较低的组件)
  补充：React 16.7(beta)之前，函数组件一直被当做纯渲染组件来使用

2、组件如何传递数据的？
子级组件函数中默认有一个props参数，子级通过 props.自定义属性 获取父级传来的值

• 父级

 function 父级组件(){
   
    return(
       <子级组件 自定义属性="自定义属性的值"/>
    )

• 子级

function 子级组件(props){
   
   return(
      {
   props.自定义的属性}
   );
}

具体示例如下：

export default function App() {
   //父级
    return (
        <div>
            <Child info="父级传给子级的信息">
                {
   /* 不能这样写，无法使父级直接传给孙子级信息 */}
                {
   /* <Grandson info2="父级传给孙子级的信息"></Grandson> */}
            </Child>
        </div>
    );
}
function Child(props) {
   //子级
console.log(props);//{info: "父级传给子级的信息"}
    return (
        <div>
            1-{
   props.info}
            {
   /* <Grandson info2="父级的子级传给子级的信息"></Grandson> */}
            {
   /* 下面这种方式实现了父级传给孙子级信息的目的 */}
            <Grandson info2={
   props.info}></Grandson>
        </div>
    );
}
function Grandson(props) {
   //孙子级
    console.log(props);//{info2: "父级的子级传给子级的信息"}
    return (
        <div>
            2-{
   props.info2}
        </div>
    );
}

3、React hooks
React hooks是React 16.8中的新增功能。它们使您无需编写类即可使用状态和其他React功能
3-1、 hook的优点：

• 简化组件逻辑
• 复用状态逻辑
• 无需使用类组件编写

3-2、常用