react函数式组件语法

　　1.useState函数-data 的定义-hook
　　react ^16.8 新增的变量定义方式-在函数式组件中代替state定义变量useState() 会返回一个数组中携带两个参数，一个是定义的变量初始值，第二个是修改该数据的方法。
　　一般情况下，通过数组的解构，快速获取useState的两个返回值。
　　例：let [num,setNum] = useState(100);基本数据类型import { useState } from ＂react＂; import ＂./App.css＂  export default function App(){       let [num,setNum] = useState(0)            //修改数据--实现类似双向绑定的效果[页面改变-数据变]       const changeNum = (e)=>{         setNum(e.target.value)       }       //设置数据--直接覆盖[数据变-页面变]       const setData = ()=>{         setNum(1000)       }      return (                
{num}
                          直接设置数据            ) }引用数据类型.import { useState } from ＂react＂; import ＂./App.css＂   export default function App() {     let [search, setSearch] = useState(＂＂)      let [likes, setLike] = useState([]);      //修改search 的数据     const changeSearch = (e) => {         setSearch(e.target.value);     }     //添加元素     const addData = (e) => {         setLike([...likes, search]);     }      return (                                   添加数据             
                 {likes.map((item, index) => {                     return 
  {item} 
                 })}             
              )   }2.事件处理React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同
　　React 事件的命名采用小驼峰式（camelCase），而不是纯小写。 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。直接绑定事件执行函数import React from ＂react＂  export default function Methods() {    const btn = (e)=>{     console.log(＂点你了...＂);     //自带event 事件对象     console.log(e);     //阻止事件冒泡     e.stopPropagation()   }    return (               点我呀        ) }绑定事件并传递参数如果直接绑定事件，react 会误认为该函数是一个立即执行函数的js代码，这种绑定方式会导致每一次dom的更新都会调用一次该执行函数，如果需要在调用时传递参数就会出现bug.
　　解决方案：通过箭头函数返回一个调用执行函数 进行调用即可import React from ＂react＂  export default function Methods() {    const btn = (num)=>{         console.log(num); //100   }   return (               btn(100)}>点我呀        ) }绑定事件并传递数据和event对象
　　箭头函数接受event对象 继续作为实参传递给执行函数import React from ＂react＂  export default function Methods() {    const btn = (num,e)=>{         console.log(num); //100         console.log(e); //事件对象   }   return (               btn(100,e)}>点我呀        ) }3. useEffect 函数式组件替代-生命周期
　　react 16.8 新增hook,代替类组件中的生命周期钩子函数式组件中没有生命周期；只有类组件才会存在生命周期，类组件的创建，更新，销毁等生命周期。
　　useEffect 函数默认：进入页面就执行一次，以后render函数每执行一次（数据发生改变）就跟着执行一次。
　　常见用法：在react中的异步或副作用操作不太好处理。异步操作：ajax请求，副作用操作：定时器（副作用：需要清除）这个useEffect 接受两个参数，useEffect (执行函数,[依赖项])
　　执行函数：函数体中 发送 ajax 并通过 useState解构的方法 更新数据
　　依赖项：值必须是一个数组，通知react 在哪些数据发生变更时，执行useEffect 的执行函数useEffect (执行函数);   //进入页面执行一次，每次render执行一次 useEffect (执行函数,[]);   //进入页面执行一次，以后再也不执行，不依赖props 和 state中的数据进行触发 useEffect (执行函数,[num]);  //进入页面执行一次，num发生改变执行一次    useEffect(() => {         //发送axios请求         getData({ id:1000 }).then(res => {             if (res.data.code === 1) {                 //修改数据                 setList(res.data.list)             }         })     }, [])4.组件基础父组件import React from ＂react＂  // 导入子组件 import Son from ＂../components/Son/Son＂ export default function App() {   return (              {/* 使用子组件 */}                 ) }子组件import React from ＂react＂; //导入子组件 export default function Son(){      return (         我是子组件     ) }5.组件通信
　　react 的数据传递是单向数据流，父组件的数据发生改变，其所有使用了这个数据的 子组件 孙子组件 都会重新渲染# 5.1 父传子 props
　　函数式组件-子组件的函数 接收形参 props 获取父组件传递的数据父组件import React, { useState } from ＂react＂  // 导入子组件 import Son from ＂../components/Son/Son＂ export default function App() {     //定义数据     let [name,setName] = useState(＂张麻子＂)     //更改数据     const changeName = ()=>{         setName(＂黄四郎＂)     }   return (              {/* 使用子组件 并传递数据 静态数据和动态数据 */}                更改数据                ) }子组件import React from ＂react＂; //导入子组件 //定义子组件时通过 形参接收 props  export default function Son(props) {     //接收数据-对象解构获取单个数据     let { name, title } = props     return (                      
 {title}
             
{name}
             我是子组件              ) }5.2 子传父 子组件调用父组件传入的函数父组件传递定义一个函数 传递给 子组件
　　子组件获取这个函数，并且调用该函数，调用时写入要传递的数据父组件import React from ＂react＂  // 导入子组件 import Son from ＂../components/Son/Son＂ export default function App() {     //定义一个函数--传递给子组件   //子组件接收-调用该函数--并回传数据   const getData = (data) => {     console.log(data);  //打印获取的数据   }   return (            {/* 使用子组件 并传递数据 静态数据和动态数据 */}               ) }子组件import React from ＂react＂; //导入子组件 //定义子组件时通过 形参接收 props  export default function Son(props) {     //获取父组件传递的函数     let { getSonData } = props;     //在事件中调用父组件传递过来的函数 并传入数据     const sendData = () => {         getSonData(＂我是子组件传给爸爸组件的数据＂)     }     return (                       传递数据给父组件              ) }