第12期課件27react組件化2lesson302瑞客

React組件化表單組件設(shè)計與實(shí)antd表單方案 掌握第組件正確使用方能設(shè)計并實(shí)現(xiàn)自己的組了解常見組件優(yōu)化技使用設(shè)計并實(shí)現(xiàn)表單控實(shí)現(xiàn)彈窗類實(shí)現(xiàn)樹組使 ponent、ant /create-react-app/docs/getting-cdmy-appnpm使用第組不必eject，直接安裝：npminstallantd--范例：試用ant-designimportimportReact,{Component}from'react'importButtonfrom'antd/lib/button'import"antd/dist/antd.css"{render(){return(<div<Button)}}安裝react-app-rewired取代react-scripts，可以擴(kuò)展wck的配 ，類似npmnpminstallreact-app-rewiredcustomize-crababel-plugin-import- const{override,fixBabelImports}=require("customize-module.exportsoverride(libraryNamelibraryName:"antd",style:"css""scripts":{"test":"react-app-rewiredtest","eject":"react-app-rewiredeject"支持裝飾?const{addDecoratorsLegacy}=require("customize-importReact,{Component}from"react";import{Button}from"antd";constfoo=Cmp=>props{return<divconstfoo2=Cmp=>props{returnclassChildextends{render()return<div}}/*functionChild(props)return<div}classHocPageextends{render()//constFoo=foo2(foo(Child));return(<Button}}importimportReact,{Component}fromimport{Form,Input,Icon,Button}from"antd";constFormItem=Form.Item;constnameRules={required:true,message:"pleaseinputyourname"constpasswordRules={required:true,message:"pleaseinputyourpassword"classFormPageDecoratorsextends{handleSubmit=()=>/*const{getFieldsValue,getFieldValue}=ps.form;console.log("submit",getFieldsValue());*/const{validateFields}=ps.form;validateFields((err,values)=>{if}elseconsole.log("submit",}render()const{getFieldDecorator}=return(<FormItem<FormItem {getFieldDecorator("name",{rules:[nameRules]<Inputprefix={<Icontype="user"/>}<FormItem {getFieldDecorator("password",{rules:[passwordRules]<Inputtype="password"prefix={<Icontype="lock"/>}<FormItem <Buttontype="primary"}}//exportdefault表單組件要求實(shí)現(xiàn)數(shù)據(jù)收集、校驗(yàn)、提交等特性，可通過高階組件表單基本結(jié)構(gòu)，創(chuàng)建importimportReact,{Component}from constnameRules={required:true,message:"pleaseinputyourname!"};constpasswordRules={required:classMyFormPageextends{handleSubmit=()=>const{getFieldValue}=ps;constres={name:getFieldValue("name"),console.log("hah",handleSubmit2=()=>const{validateFields}=ps;validateFields((err,values)=>{if{console.log("validateFields",}elseconsole.log("submit",}render()const{getFieldDecorator}=ps;return({getFieldDecorator("name",{rules:[nameRules]<inputtype="text"{getFieldDecorator("password",<inputtype="password"<button}}高階組件kFormCreate：擴(kuò)展現(xiàn)有表單 importimportReact,{Component}fromexportdefaultfunction{returnclassextendsComponent{{this.options//各字段選項(xiàng)this.state={};//各字段值}handleChange=e=>let{name,value}=e.target;getFieldValue=field{returnvalidateFields=callback=>constconstres={...this.state};consterr=[];for(letiin{if(res[i]==={}}if(err.length>{callback(err,}}getFieldDecorator=(field,option){this.options[field]=option;returnInputCmp=>({//由React.createElement{name:value:this.state[field]||"",//控件值onChange:this.handleChange,//控件change {return(<div}彈窗類組件的要求彈窗內(nèi)容在A處，卻在B處展示。eact中相當(dāng)于彈窗內(nèi)容看起來被ender到一個組件里面去，實(shí)際改變的是網(wǎng)頁上另一處的DOM結(jié)構(gòu)，這個顯然不符合正常邏輯。但是通過使用框架提供的特定API組件實(shí)例并指定掛載目標(biāo)仍可完成任務(wù)。 <div<div>...{needDialog<section>Any}方案傳送門，reactv16之后出現(xiàn)的portal可以實(shí)現(xiàn)內(nèi)容傳送功能。////importReact,{Component}from"react";import{createPortal}from"react-dom";import"./index.scss";{constructor(props){constdoc=window. }{ }render()const{hideDialog}=ps;returncreatePortal(<div<buttononClick={hideDialog}>關(guān)掉彈窗}}//top:0;right:left:width:400px;height:300px;border:solid1pxgray;text-align:}方案在v16之前，實(shí)現(xiàn)“傳送門”，要用到react中兩個秘而不宣的ReactexportexportclassDialog2{render(){}componentDidMount()constdoc=;}{} }{this,//當(dāng)前this.node//傳送門另一端的DOMnode}}總結(jié)一下Dialog什么都不給自己畫，render返回一個null就夠它做得事情是通過調(diào)用createPortal把要畫的東西畫在DOM樹上另一個角落遞歸：自己調(diào)用自如計算f(n)=f(n-1)*n;n>0,returnn===1?1:n*foo(n-}eac中實(shí)現(xiàn)遞歸組件更加純粹，就是組件遞歸渲染即可。假設(shè)我們的節(jié)點(diǎn)組件是eNoe，它的ender發(fā)現(xiàn)當(dāng)前節(jié)點(diǎn)擁有子節(jié)點(diǎn)就要繼續(xù)渲染自己。節(jié)點(diǎn)的打開狀態(tài)可以通過給組件一個open狀態(tài)來。實(shí)importimportReact,{Component}fromimportTreeNodefrom consttreeDatakey0//標(biāo)識唯title:" children:[{key:children:[{key:children:[{key:{key:2,{key:children:[{{key:4,{key:5,title:" {render(){return(}}importimportReact,{Component}fromimportclassnamesfrom"classnames";//先安裝下npminstall{constructor(props){this.state={expanded:}{expanded:render()const{title,children}=ps.data;const{expanded}=this.state;consthasChildren=children&&children.length>0;return(<divclassName="nodeInner"className={classnames("tri",expanded?"tri-open":"tri-{expanded&&hasChildren&&<div{children.map(item=>return<TreeNodekey={item.key}data={item}}}/*/*樹組件css{}.childrenmargin-left:}.triwidth:20px;height:20px;margin-right:2px;}.tri-{content: width:0;border-left:8pxsolidblack;}.tri-{ 范例：通 ponentUpdate優(yōu)化組importReact,{Component}fromexportdefaultclassCommentListextends{constructor(props){this.state={comments:[]}{setInterval(()=>{this.setState({comments:{{

author:"body:"這是寫的文章author:"body:"這是寫的文章},}render()const{comments}=this.state;return(}}classCommentextends ponentUpdate(nextProps,{const{author,body}=const{author:nowAuthor,body:nowBody}=ps.data;if(body===nowBody&&author===nowAuthor){returnfalse;//如果不執(zhí)行這里，將會多次}return}{const{body,author}=ps.data;return(<p>作者： }}定制 后 importimportReact,{ponent}fromexportdefault{constructor(props){this.state={obj:{num:}ponentPagesetCounter=()counter:1,obj:{num:{const{counter,obj}=this.state;return(<button<div>counter:<div>obj.num:}}缺點(diǎn)是必須要用class形式，而且要注意是淺比React.memo(...)是React ponent類似，是用來控制函數(shù)組件的重新渲染的。React.memo(...)其實(shí)就是函數(shù)組件的 ponent。i