react函数式组件语法

　　1。useState函数data的定义hook
　　react16。8新增的变量定义方式在函数式组件中代替state定义变量useState（）会返回一个数组中携带两个参数，一个是定义的变量初始值，第二个是修改该数据的方法。
　　一般情况下，通过数组的解构，快速获取useState的两个返回值。
　　例：let〔num，setNum〕useState（100）；基本数据类型import｛useState｝import。App。cssexportdefaultfunctionApp（）｛let〔num，setNum〕useState（0）修改数据实现类似双向绑定的效果〔页面改变数据变〕constchangeNum（e）｛setNum（e。target。value）｝设置数据直接覆盖〔数据变页面变〕constsetData（）｛setNum（1000）｝return（h1｛num｝h1inputtypetextonChange｛changeNum｝value｛num｝buttononClick｛setData｝直接设置数据button）｝引用数据类型。import｛useState｝import。App。cssexportdefaultfunctionApp（）｛let〔search，setSearch〕useState（）let〔likes，setLike〕useState（〔〕）；修改search的数据constchangeSearch（e）｛setSearch（e。target。value）；｝添加元素constaddData（e）｛setLike（〔。。。likes，search〕）；｝return（inputtypetextonChange｛changeSearch｝placeholder添加搜索记录value｛search｝buttononClick｛addData｝添加数据buttonul｛likes。map（（item，index）｛returnlikey｛index｝｛item｝li｝）｝ul）｝2。事件处理React元素的事件处理和DOM元素的很相似，但是有一点语法上的不同
　　React事件的命名采用小驼峰式（camelCase），而不是纯小写。使用JSX语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。直接绑定事件执行函数importReactfromreactexportdefaultfunctionMethods（）｛constbtn（e）｛console。log（点你了。。。）；自带event事件对象console。log（e）；阻止事件冒泡e。stopPropagation（）｝return（buttononClick｛btn｝点我呀button）｝绑定事件并传递参数如果直接绑定事件，react会误认为该函数是一个立即执行函数的js代码，这种绑定方式会导致每一次dom的更新都会调用一次该执行函数，如果需要在调用时传递参数就会出现bug。
　　解决方案：通过箭头函数返回一个调用执行函数进行调用即可importReactfromreactexportdefaultfunctionMethods（）｛constbtn（num）｛console。log（num）；100｝return（buttononClick｛（）btn（100）｝点我呀button）｝绑定事件并传递数据和event对象
　　箭头函数接受event对象继续作为实参传递给执行函数importReactfromreactexportdefaultfunctionMethods（）｛constbtn（num，e）｛console。log（num）；100console。log（e）；事件对象｝return（buttononClick｛（e）btn（100，e）｝点我呀button）｝3。useEffect函数式组件替代生命周期
　　react16。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。code1）｛修改数据setList（res。data。list）｝｝）｝，〔〕）4。组件基础父组件importReactfromreact导入子组件importSonfrom。。componentsSonSonexportdefaultfunctionApp（）｛return（｛使用子组件｝Son）｝子组件importR导入子组件exportdefaultfunctionSon（）｛return（我是子组件）｝5。组件通信
　　react的数据传递是单向数据流，父组件的数据发生改变，其所有使用了这个数据的子组件孙子组件都会重新渲染5。1父传子props
　　函数式组件子组件的函数接收形参props获取父组件传递的数据父组件importReact，｛useState｝fromreact导入子组件importSonfrom。。componentsSonSonexportdefaultfunctionApp（）｛定义数据let〔name，setName〕useState（张麻子）更改数据constchangeName（）｛setName（黄四郎）｝return（｛使用子组件并传递数据静态数据和动态数据｝Sontitle我是爸爸组件传递的标题name｛name｝buttononClick｛changeName｝更改数据button）｝子组件importR导入子组件定义子组件时通过形参接收propsexportdefaultfunctionSon（props）｛接收数据对象解构获取单个数据let｛name，title｝propsreturn（h1｛title｝h1h2｛name｝h2我是子组件）｝5。2子传父子组件调用父组件传入的函数父组件传递定义一个函数传递给子组件
　　子组件获取这个函数，并且调用该函数，调用时写入要传递的数据父组件importReactfromreact导入子组件importSonfrom。。componentsSonSonexportdefaultfunctionApp（）｛定义一个函数传递给子组件子组件接收调用该函数并回传数据constgetData（data）｛console。log（data）；打印获取的数据｝return（｛使用子组件并传递数据静态数据和动态数据｝SongetSonData｛getData｝）｝子组件importR导入子组件定义子组件时通过形参接收propsexportdefaultfunctionSon（props）｛获取父组件传递的函数let｛getSonData｝在事件中调用父组件传递过来的函数并传入数据constsendData（）｛getSonData（我是子组件传给爸爸组件的数据）｝return（buttononClick｛sendData｝传递数据给父组件button）｝