Genius-React
关注
分享
扫一扫
GeniusTeam-夜光
GeniusTeam：
结尽同心缔尽缘， 此生虽短意缠绵，
世间安得双全法， 不负如来不负卿。
展开
-
夜光带你走进React.js（十三）擅长的领域
夜光序言： 自古风流归志士;从来事业属良贤。 正文： 重构成一个组件，组件接收数组参数，每个列表元素分配一个 key 不然会出现警告 a key should be provided for list items，意思就是需要包含 key： <!DOCTYPE html> ...原创 2019-10-14 18:58:49 · 126 阅读 · 0 评论 -
夜光带你走进React.js（十八）擅长的领域
夜光序言： 愿你此生清澈明朗，做你愿做的事，爱你所爱的人。 正文：React Refs React 支持一种非常特殊的属性 Ref 厉害啊~~，我们可以用来绑定到 render() 输出的任何组件上。 这个特殊的属性允许你引用 render() 返回的相应的支撑实例（ backing instance ）。 这样就可以确保在任何时间总是拿到...原创 2019-10-14 19:07:07 · 123 阅读 · 0 评论 -
夜光带你走进React.js（十七）擅长的领域
夜光序言： 聚散苦匆匆，此恨无穷。 今年花胜去年红。 可惜明年花更好，知与谁同? 正文：很重要 → React 表单与事件 嗯~ 如何在 React 中使用表单 HTML 表单元素与 React 中的其他 DOM 元素有所不同 因为表单元素生来就保留一些内部状态。 在 HTML 当中，像 <input&...原创 2019-10-14 19:06:20 · 114 阅读 · 0 评论 -
夜光带你走进React.js（十六）擅长的领域
夜光序言： 风牵萧叶落，雨送烟尘梦。 红伞遮伊人，相思在天涯。 正文：介绍一下 → React AJAX React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取，当从服务端获取数据时可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI。 当使用异步加载数据时，在组件卸载前使用 compo...原创 2019-10-14 19:04:20 · 141 阅读 · 0 评论 -
夜光带你走进React.js（十五）擅长的领域
夜光序言： 某一天你我暮年，静坐庭前，赏花落，笑谈浮生流年。 今夕隔世百年一眼，相携而过，才知姹紫嫣红早已看遍。 正文：这里，我们聊一聊 → React 组件生命周期 讨论 React 组件的生命周期。 组件的生命周期可分成三个状态： Mounting：已插入真实 DOM Updating：正在被重新渲染 Unmounting：已移出真实 DOM 生命周期的方...原创 2019-10-14 19:03:27 · 121 阅读 · 0 评论 -
夜光带你走进React.js（十四）擅长的领域
夜光序言： 灯火星星，人声杳杳，歌不尽乱世烽火。乌云蔽月，人迹踪绝，说不出如斯寂寞。 正文：我们聊一聊→React 组件 API 嗯唔~~ 我们将讨论 React 组件 API。 主要就是讲解以下7个方法: 设置状态：setState 替换状态：replaceState 设置属性：setProps 替换属性：replaceP...原创 2019-10-14 19:01:24 · 154 阅读 · 0 评论 -
夜光带你走进React.js（九）擅长的领域
夜光序言： 没有等出来的一手遮天，只有拼出来的万人之上。 正文：事件处理，嗯唔，比如说点击事件 React 事件处理 React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同: React 事件绑定属性的命名采用驼峰式写法，而不是小写。 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法) HTML 通常写法是...原创 2019-10-12 17:36:04 · 138 阅读 · 0 评论 -
夜光带你走进React.js（七）擅长的领域
夜光序言： 一条路，人烟稀少，孤独前行。却不得不坚持前行。因为它的尽头，种着理想。 正文： React State(状态) React 把组件看成是一个状态机（State Machines）。 通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。 React 里，只需更新组件的 state，然后根据新的 state 重...原创 2019-10-12 17:33:31 · 138 阅读 · 0 评论 -
夜光带你走进React.js（六）擅长的领域
夜光序言： 哪有什么一鸣惊人，不过是十年如一日的坚持。别总羡慕别人的光鲜亮丽，那只是你没看到他们背后默默付出时的努力。 正文：我们看一下：React 组件 如何使用组件使得我们的应用更容易来管理。【我们再学习vuejs的时候，也关注这一点】 接下来我们封装一个输出 "嗯唔~~" 的组件，组件名为 HelloMessage： <!DO...原创 2019-10-12 17:31:42 · 119 阅读 · 0 评论 -
夜光带你走进React.js（三）擅长的领域
夜光序言： 晓风夜凉，月染银霜，执笔描绘桃花妆;饮一盏桃花酿，弹一曲琴声长。墨发随风，罗衫轻扬，眉间镌刻落花殇。 正文： React JSX → 是我们学习react的核心概念 React 使用 JSX 来替代常规的 JavaScript。 JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。 ...原创 2019-10-12 17:28:24 · 127 阅读 · 0 评论 -
夜光带你走进React.js（十二）擅长的领域
夜光序言： 彼岸花开开彼岸，奈何桥前可奈何?有花不见叶，叶生不见花，千年花叶两相错，生生世世永相离。 正文：很帅气 → React 列表 & Keys 我们用React 举一个例子 使用 map() 方法遍历数组生成了一个 1 到 5 的数字列表: <!DOCTYPE html> <html> ...原创 2019-10-14 18:56:09 · 105 阅读 · 0 评论 -
夜光带你走进React.js（十）擅长的领域
夜光序言： 情之为伤，苦了多少人，煞了多少忆，情之为悲，冷了多少清，落了多少思，纵使飞蛾扑火却依然义无反顾，只观情，伤人伤己，却是一生无法割断，落一笔长相思，挥洒多少痴情泪，饮一杯浊酒，品了多少世间情 正文：来聊一聊一个核心概念 React 条件渲染 在 React 中，你可以创建不同的组件来封装各种你需要的行为。 这里~~~ 然后还可以根据应用的状态变化只渲染其中的...原创 2019-10-12 17:37:31 · 135 阅读 · 0 评论 -
夜光带你走进React.js（十一）擅长的领域
夜光序言： 彼岸花开开彼岸，奈何桥前可奈何?有花不见叶，叶生不见花，千年花叶两相错，生生世世永相离。 正文： React 事件中 this 的三种使用方式 1.bind绑定的方法 不传参 <!DOCTYPE html> <html lang="en"> <head> <m...原创 2019-10-12 17:38:37 · 124 阅读 · 0 评论 -
夜光带你走进React.js（八）擅长的领域
夜光序言： 真正在努力的，日子是不会舒服的。而只要自己变优秀了，其他的事情自然就会跟着好起来。 正文： 很帅~~ React Props state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。 这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。 嗯...原创 2019-10-12 17:34:32 · 148 阅读 · 0 评论 -
夜光带你走进React.js（五）擅长的领域
夜光序言： 根本没有那条“更好的路”，只有一条路，就是你选择的那条路。关键是，你要勇敢地走上去，而且要坚持走下去。 正文： 关于React入门容易出错的地方： 我们需要注意：代码中嵌套多个 HTML 标签，需要使用一个标签元素包裹它 ReactDOM.render( <h1>这是错误的例子</h...原创 2019-10-12 17:30:31 · 132 阅读 · 0 评论 -
夜光带你走进React.js（四）擅长的领域
夜光序言： 情之所钟者，不惧生，不惧死，不惧分离。世间万物，唯情不死，谓之长生。 正文： 嗯唔~~哪个：JSX 就是 JavaScript，一些标识符像 class 和 for 不建议作为 XML 属性名。 作为替代，React DOM 使用 className 和 htmlFor 来做对应的属性。 很帅气~~，我们使用 JSX JSX 看起来类似 HTM...原创 2019-10-12 17:29:30 · 154 阅读 · 0 评论 -
夜光带你走进React.js（二）擅长的领域
夜光序言： 花随风落，雨伴云晴，过客匆匆，相逢终有期，路过的风景，经历过的往事，放在心间就好。 正文： 嗯唔~~React 元素渲染 我们需要知道：元素是构成 React 应用的最小单位，它用于描述屏幕上输出的内容。 const element = <h1>Reactjs</h1>...原创 2019-10-11 19:08:04 · 133 阅读 · 0 评论 -
夜光带你走进React.js（一）擅长的领域
夜光序言： 人间的事往往如此，当时提起痛不欲生，几年之后，也不过是一场回忆而已。 正文：嗯唔 使用 create-react-app 快速构建 React 开发环境 create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。 create-react-app 自动创建的项目是基于 Webpack + ES...原创 2019-10-11 19:06:51 · 140 阅读 · 0 评论