第12期课件27react组件化2lesson302瑞客

React组件化表单组件设计与实antd表单方案 掌握第组件正确使用方能设计并实现自己的组了解常见组件优化技使用设计并实现表单控实现弹窗类实现树组使 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，可以扩展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表单组件要求实现数据收集、校验、提交等特性，可通过高阶组件表单基本结构，创建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：扩展现有表单 importimportReact,{Component}fromexportdefaultfunction{returnclassextendsComponent{{this.options//各字段选项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}弹窗类组件的要求弹窗内容在A处，却在B处展示。eact中相当于弹窗内容看起来被ender到一个组件里面去，实际改变的是网页上另一处的DOM结构，这个显然不符合正常逻辑。但是通过使用框架提供的特定API组件实例并指定挂载目标仍可完成任务。 <div<div>...{needDialog<section>Any}方案传送门，reactv16之后出现的portal可以实现内容传送功能。////importReact,{Component}from"react";import{createPortal}from"react-dom";import"./index.scss";{constructor(props){constdoc=window. }{ }render()const{hideDialog}=ps;returncreatePortal(<div<buttononClick={hideDialog}>关掉弹窗}}//top:0;right:left:width:400px;height:300px;border:solid1pxgray;text-align:}方案在v16之前，实现“传送门”，要用到react中两个秘而不宣的ReactexportexportclassDialog2{render(){}componentDidMount()constdoc=;}{} }{this,//当前this.node//传送门另一端的DOMnode}}总结一下Dialog什么都不给自己画，render返回一个null就够它做得事情是通过调用createPortal把要画的东西画在DOM树上另一个角落递归：自己调用自如计算f(n)=f(n-1)*n;n>0,returnn===1?1:n*foo(n-}eac中实现递归组件更加纯粹，就是组件递归渲染即可。假设我们的节点组件是eNoe，它的ender发现当前节点拥有子节点就要继续渲染自己。节点的打开状态可以通过给组件一个open状态来。实importimportReact,{Component}fromimportTreeNodefrom consttreeDatakey0//标识唯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优化组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;//如果不执行这里，将会多次}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:}}缺点是必须要用class形式，而且要注意是浅比React.memo(...)是React ponent类似，是用来控制函数组件的重新渲染的。React.memo(...)其实就是函数组件的 ponent。i