Skip to content

Commit

Permalink
feat: 3.14
Browse files Browse the repository at this point in the history
  • Loading branch information
@jCodeLife
jCodeLife committed Apr 8, 2022
1 parent d9fee60 commit a85f737
Show file tree
Hide file tree
Showing 3 changed files with 1 addition and 0 deletions.
Binary file added React/3. 高级指引/3.14不使用 JSX.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions React/3. 高级指引/xmind/3.14不使用 JSX.pos
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"diagram":{"image":{"x":0,"width":200,"y":0,"pngdata":"iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAsUlEQVR4nO3BAQEAAACCIP+vbkhAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB8GXHmAAFMgHIEAAAAAElFTkSuQmCC","height":200},"elements":{"leftChildren":[],"note":"","margin":{"childMarginW":10,"childMarginH":5,"marginW":20,"marginH":10},"watermark":"","children":[{"parent":"root","lineStyle":{"randomLineColor":"rgb(255,204,204)","lineColor":"#7B1FA2"},"children":[{"parent":"812b3a9306dd","note":"","children":[],"style":{"font-weight":"normal"},"id":"ac25a09c6779","title":"React&nbsp;并不强制要求使用&nbsp;JSX","icons":[{"color":"rgb(191, 30, 27)","name":"priority","index":"0","text":"&#xe67a"}]},{"parent":"812b3a9306dd","note":"","children":[],"style":{"font-weight":"normal"},"id":"4d70d73dad33","title":"当你不想在构建环境中配置有关&nbsp;JSX&nbsp;编译时，不在&nbsp;React&nbsp;中使用&nbsp;JSX&nbsp;会更加方便","icons":[{"color":"rgb(99, 171, 247)","name":"priority","index":"1","text":"&#xe625"}]}],"style":{"background-color":"#7B1FA2","border-radius":"5px","color":"rgb(255, 255, 255)","font-weight":"bold","font-size":13,"border-color":"rgb(255, 255, 255)","border-width":"0px","border-style":"none"},"id":"812b3a9306dd","title":"非强制"},{"parent":"root","lineStyle":{"lineColor":"#1976D2"},"children":[{"parent":"3b7f7da9d693","lineStyle":{"lineColor":"#555","lineWidth":1},"children":[],"style":{"lineStype":{"lineType":"curve","lineColor":"#555","lineWidth":1},"padding":"2px 8px 2px 8px","color":"#666","lineStyle":{"lineColor":"#555","lineWidth":1},"textAlign":"left","font-weight":"normal","font-size":"13px","font-family":"微软雅黑","bold":false,"font-style":"normal","italic":false},"id":"3da828dbd224","title":"每个&nbsp;JSX&nbsp;元素只是调用&nbsp;React.createElement(component,&nbsp;props,&nbsp;...children)&nbsp;的语法糖","icons":[{"color":"rgb(99, 171, 247)","name":"priority","index":"0","text":"&#xe67a"}]},{"parent":"3b7f7da9d693","lineStyle":{"lineColor":"#555","lineWidth":1},"children":[],"style":{"lineStype":{"lineType":"curve","lineColor":"#555","lineWidth":1},"padding":"2px 8px 2px 8px","color":"#666","lineStyle":{"lineColor":"#555","lineWidth":1},"textAlign":"left","font-weight":"normal","font-size":"13px","font-family":"微软雅黑","bold":false,"font-style":"normal","italic":false},"id":"4d0baeac4530","title":"因此，使用&nbsp;JSX&nbsp;可以完成的任何事情都可以通过纯&nbsp;JavaScript&nbsp;完成","icons":[{"color":"rgb(113, 203, 45)","name":"priority","index":"1","text":"&#xe625"}]}],"boundaries":[],"style":{"background-color":"#1976D2","border-radius":"5px","font-weight":"bold","font-size":13},"id":"3b7f7da9d693","title":"React.createElement(）"},{"parent":"root","lineStyle":{"randomLineColor":"rgb(153,204,255)","lineColor":"#388E3C"},"children":[{"parent":"0291282e6d37","lineStyle":{"lineColor":"#555","lineWidth":1},"children":[{"parent":"8759611ecbbe","note":"class Hello extends React.Component {\n render() {\n return &lt;div&gt;Hello {this.props.toWhat}&lt;/div&gt;;\n }\n}\n\nReactDOM.render(\n &lt;Hello toWhat=&quot;World&quot; /&gt;,\n document.getElementById(&#39;root&#39;)\n);","children":[],"id":"d0ca4ee32c23","title":"代码"}],"style":{"lineStype":{"lineType":"curve","lineColor":"#555","lineWidth":1},"padding":"2px 8px 2px 8px","color":"#666","lineStyle":{"lineColor":"#555","lineWidth":1},"textAlign":"left","font-weight":"normal","font-size":"13px","font-family":"微软雅黑","bold":false,"font-style":"normal","italic":false},"id":"8759611ecbbe","title":"例如，用&nbsp;JSX&nbsp;编写的代码","icons":[{"color":"rgb(99, 171, 247)","name":"priority","index":"0","text":"&#xe67a"}]},{"parent":"0291282e6d37","lineStyle":{"lineColor":"#555","lineWidth":1},"children":[{"parent":"83be2310dcad","children":[],"style":{"background-color":"#F5F5F5","font-size":12},"id":"e6ef07d6ec95","title":"class&nbsp;Hello&nbsp;extends&nbsp;React.Component&nbsp;{\n&nbsp;&nbsp;render()&nbsp;{\n&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;React.createElement('div',&nbsp;null,&nbsp;`Hello&nbsp;${this.props.toWhat}`);\n&nbsp;&nbsp;}\n}\n\nReactDOM.render(\n&nbsp;&nbsp;React.createElement(Hello,&nbsp;{toWhat:&nbsp;'World'},&nbsp;null),\n&nbsp;&nbsp;document.getElementById('root')\n);"}],"boundaries":[{"boundary":true,"parent":"83be2310dcad","boundRank":1,"children":[],"pos":{"miny":9837,"minx":10285,"maxY":10027,"maxX":10712},"range":"0,0","style":{"lineType":"1","dasharray":"6,3","lineColor":"rgb(113, 203, 45)","opacity":"0.1","fill":"rgb(113, 203, 45)","lineWidth":"1"},"id":"a92059f87a35","title":"外框"}],"style":{"lineStype":{"lineType":"curve","lineColor":"#555","lineWidth":1},"padding":"2px 8px 2px 8px","color":"#666","lineStyle":{"lineColor":"#555","lineWidth":1},"textAlign":"left","font-weight":"normal","font-size":"13px","font-family":"微软雅黑","bold":false,"font-style":"normal","italic":false},"id":"83be2310dcad","title":"不使用&nbsp;JSX","icons":[{"color":"rgb(113, 203, 45)","name":"priority","index":"1","text":"&#xe625"}]},{"parent":"0291282e6d37","lineStyle":{"lineColor":"#555","lineWidth":1},"children":[{"parent":"f1d3f76b27a0","children":[],"id":"17e91a8bb295","title":"如果你想了解更多&nbsp;JSX&nbsp;转换为&nbsp;JavaScript&nbsp;的示例，可以尝试使用&nbsp;在线&nbsp;Babel&nbsp;编译器"}],"style":{"lineStype":{"lineType":"curve","lineColor":"#555","lineWidth":1},"padding":"2px 8px 2px 8px","color":"#666","lineStyle":{"lineColor":"#555","lineWidth":1},"textAlign":"left","font-weight":"normal","font-size":"13px","font-family":"微软雅黑","bold":false,"font-style":"normal","italic":false},"id":"f1d3f76b27a0","title":"在线&nbsp;Babel&nbsp;编译器","icons":[{"color":"rgb(255, 159, 26)","name":"priority","index":"2","text":"&#xe62a"}]}],"style":{"background-color":"#388E3C","border-radius":"5px","color":"rgb(255, 255, 255)","font-weight":"bold","font-size":13,"border-color":"rgb(255, 255, 255)","border-width":"0px","border-style":"none"},"id":"0291282e6d37","title":"例子<br>"},{"parent":"root","lineStyle":{"randomLineColor":"rgb(153,204,255)","lineColor":"#F57F17"},"children":[{"parent":"b653f7534587","lineStyle":{"lineColor":"#555","lineWidth":1},"children":[{"parent":"09c359863911","lineStyle":{"lineColor":"#555","lineWidth":1},"children":[],"style":{"background-color":"#F5F5F5","lineStype":{"lineType":"roundBroken","lineColor":"#555","lineWidth":1},"padding":"2px 8px 2px 8px","color":"#666","lineStyle":{"lineColor":"#555","lineWidth":1},"textAlign":"left","font-weight":"normal","font-size":12,"font-family":"微软雅黑","bold":false,"font-style":"normal","italic":false},"id":"52c4bcd328b2","title":"const&nbsp;e&nbsp;=&nbsp;React.createElement;\n\nReactDOM.render(\n&nbsp;&nbsp;e('div',&nbsp;null,&nbsp;'Hello&nbsp;World'),\n&nbsp;&nbsp;document.getElementById('root')\n);"}],"boundaries":[{"boundary":true,"parent":"09c359863911","boundRank":1,"children":[],"range":"0,0","style":{"lineType":"1","dasharray":"6,3","lineColor":"rgb(113, 203, 45)","fill":"rgb(113, 203, 45)","opacity":"0.1","lineWidth":"1"},"id":"c67ada8e6c3f","title":"外框"}],"style":{"lineStype":{"lineType":"curve","lineColor":"#555","lineWidth":1},"padding":"2px 8px 2px 8px","color":"#666","lineStyle":{"lineColor":"#555","lineWidth":1},"textAlign":"left","font-weight":"normal","font-size":"13px","font-family":"微软雅黑","bold":false,"font-style":"normal","italic":false},"id":"09c359863911","title":"如果你不想每次都键入&nbsp;React.createElement，<br>通常的做法是创建快捷方式","icons":[{"color":"rgb(99, 171, 247)","name":"priority","index":"0","text":"&#xe67a"}]},{"parent":"b653f7534587","lineStyle":{"lineColor":"#555","lineWidth":1},"children":[],"style":{"lineStype":{"lineType":"curve","lineColor":"#555","lineWidth":1},"padding":"2px 8px 2px 8px","color":"#666","lineStyle":{"lineColor":"#555","lineWidth":1},"textAlign":"left","font-weight":"normal","font-size":"13px","font-family":"微软雅黑","bold":false,"font-style":"normal","italic":false},"id":"a055a844090f","title":"如果你使用了&nbsp;React.createElement&nbsp;的快捷方式，那么在没有&nbsp;JSX&nbsp;的情况下使用&nbsp;React&nbsp;几乎一样方便。<br>或者，你也可以参考社区项目，如：react-hyperscript&nbsp;和&nbsp;hyperscript-helpers，它们提供了更简洁的语法","icons":[{"color":"rgb(113, 203, 45)","name":"priority","index":"1","text":"&#xe625"}]}],"style":{"background-color":"#F57F17","border-radius":"5px","color":"rgb(255, 255, 255)","font-weight":"bold","font-size":13,"border-color":"rgb(255, 255, 255)","border-width":"0px","border-style":"none"},"id":"b653f7534587","title":"快捷方式"}],"root":true,"theme":"customise_7fd055efa78b","style":{"background-color":"rgb(255, 83, 92)","border-radius":"6px","color":"rgb(255, 255, 255)","font-weight":"bold","border-color":"rgb(255, 255, 255)","border-width":"0px","border-style":"none"},"id":"root","title":"不使用&nbsp;JSX","icons":[{"color":"rgb(255, 255, 255)","name":"","index":"46"}],"structure":"mind_free"}},"meta":{"exportTime":"2022-04-08 10:27:55","member":"60cca488e0b34d55bbf2954f","diagramInfo":{"creator":"60cca488e0b34d55bbf2954f","created":"2022-04-08 10:01:24","modified":"2022-04-08 10:27:31","title":"3.14不使用 JSX","category":"mind_free"},"id":"624f9774e401fd072efb84e9","type":"ProcessOn Schema File","version":"1.0"}}
Binary file added React/3. 高级指引/xmind/3.14不使用 JSX.xmind
View file
Binary file not shown.

0 comments on commit a85f737

Please sign in to comment.