发表于
2020-12-21 00:00:00
React －－万物皆可组件
一、React 组件是什么？ 组件，从概念上类似于 javascript 函数，他接受任意入参（props），并返回作用于描述页面展示内容的 React 元素。 组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。 1.创建一个组件 // 函数组件 function Welcome(props) { returnHello, {props.name}; } // class 组件 class Welcome extends React.Component { render() { returnHello, {this.props.name}; } } 2.渲染组件 class Welcome extends React.Component { render() { returnHello, {this.props.name}; } } ReactDOM.render(, document.getElementById('root') ); 3.组件 React 的基础原则有三条，分别是： React 界面完全由数据驱动 React 中一切都是组件 props 是 React 组件之间通讯的基本方式 给组件输入一个参数，最终返回一个 React Element,React Element 就是在页面上展示的内容，相当于一个 DOM 节点 React 一大核心就是
...继续阅读
(10)
发表于
2020-12-12 00:00:00
React 中的占位符 Fragment
在 React 项目中，render 方法只能有一个根元素，一般都是，然后在里面写上我们的组件，渲染到浏览器一看，除了我们想要显示的组件，外面还套着一层 div，如果在写项目的时候，套了很多曾组件，那么每一层都会多出来一个父级元素 div，不美观，而且在调整样式的时候会有些麻烦 因此，React 提供了一个占位符 Fragment，写法是： // index.js import React, { Component,Fragment } from 'react' export default class index extends Component { render() { return (hello,wolrd) } } 在引入 React 的时候，增加一个属性 Fragment，然后 render()方法下唯一的根元素我们用来代替，这时候再看浏览器，就不会显示多余的标签了，直接显示标签
...继续阅读
(12)
发表于
2020-09-05 17:16:07
Android声明式UI框架 Litho 初探 ——两种数据类型
Litho中包含的的两种数据类型 Litho的两种属性分别是：
不可变属性称为Props 可变属性称为State 不可变属性Props 定义和使用props Props属性：Component中使用@Prop注解的参数集合，具有单向性和不可变性，可以在左右的方法中访问它的指。在同一个Component中我们可以定义和访问相同的prop 下面这个例子，定义了两个Prop，一个string类型text，一个int类型index，text的注解中optional = true表示它是一个可选参数。
当Component的生命周期方法被调用的时候，@Prop参数会保存component创建时从它们的父级传递过来的值(或者它们的默认值)
设置props prop参数其实在前几篇文章中都有使用过，用起来也没有什么特别的地方，这里不在赘述，制作一个简单的说明。
Component中的prop参数会在编译时候自动加入到Builder中，以上面的代码举例:
PropComponent.create(c).index(10)./*text("测试文本").*/build() Prop的默认值 对于可选的Prop如果不设置值，就是java的默认值。或者你也可以使用@PropDefault注解然后添加默认值。
如果你使用Kotlin，那还需要加上@JvmFiel把该字段编辑为public才行。
@
...继续阅读
(41)
发表于
2020-04-04 05:48:26
react native入门
react native 概况React native 是facebook开源的移动框架。用JavaScript语言为主，基于React框架。 是适合跨平台移动开发的框架，具有比用webview混合开发更好的性能，又具有h5那样编写一次，跨平台运行的较低维护成本。而且可以和原生很好的结合。重要特性如下：支持 ES2015 ( ES6)ES2015 features如
import, from，class，extends，箭头函数JSX一般将代码嵌在xml里，但JSX反其道而行之。是将xml嵌在js里。Hello world!类似或是显示字符的[核心组件](https://reactnative.dev/docs/intro-react-native-components)
## 组件 （Components）
屏幕上见到的都是组件。App是组件。组件非常基础，只需要一个render函数，返回jsx渲染。
下面对相关细节进行详细介绍。
# 属性 Props
所有组件可以被不同参数初始化，这些参数叫props，即Properties的简写。
如创建组件Image，可以使用source属性来决定显示的内容。
```
import React, { Component } from 'react';
import { Image } from 'react-
...继续阅读
(8)
发表于
2020-03-04 00:00:00
Vue 2.x 复习总结 · 看不见我的美 · 是你瞎了眼
发表于
2018-11-30 10:01:00
Entity-Component-System框架心得
近期在游戏demo中试验ECS， 深入研究Unity官方的ECS框架和第三方Entitas框架， 分享下使用ECS的心得。Unity在2018版中加入了ECS系统， 但处于小白鼠阶段。默认不是Unity的一部分， 需要手动下载代码并导入Packages（新特性）。官方提供海豚例子， 但除此之外例子和资料非常少。所以完全无法，也不敢在demo中贸然引入这种系统，所以放弃官方ECS系统。第三方的Entitas（https://github.com/sschmid/Entitas-CSharp）ECS框架从2015年就开始在各地演讲中介绍。整体框架基于代码生成， 能解决一部分的代码爆炸问题， 而且性能也要好一些。例子，介绍非常丰富，例子虽然基于不同版本的Entitas，特性支持和最新版差不太多， 只是写法有细微差异， 对于理解来说无碍。经过1~2天的改造， 终于将demo从传统Unity写法改造为ECS标准写法，新增了46个文件， 而传统逻辑一共只有16个文件，大概对比下ECS的特点和差异。Entitas的ECS系统1. 本来在一个对象中添加一个类字段的过程，ECS需要添加一个类代表Component，并且代码生成。这个字段一般用于描述对象的资源，处理显示的GameObject， 表示对象的类型等。2. 本来一个对象的业务逻辑处理过程直接用方法解决的， ECS需要新加一个System，而
...继续阅读
(5)
发表于
2018-06-09 11:43:49
将 Json 转换为 Python Object(一)
$ cat example.py import json class JSONObject: def __init__(self, dict): vars(self).update(dict) # this is valid json string data = '{"channel":{"lastBuild":"2013-11-12", "component":["test1", "test2"]}}' jsonobject = json.loads(data, object_hook=JSONObject) print(jsonobject.channel.component[0]) print(jsonobject.channel.lastBuild) $ python example.py test1 2013-11-12
...继续阅读
(21)
发表于
2018-02-09 00:00:00
再谈 ReactDom.render
发表于
2017-08-10 00:00:00
Angular 最佳实践
从去年十月份开始接触 Angular 到现在，已经有大半年的时间了，同时也见证了 Angular 的快速发展，其版本也从 Angular 2 跃升为 Angular 4。与 React、Vue 相比，Angular 框架更加严谨而全面，这使得它非常适合构建大型 Web App。然而也是因为这一点，使其学习曲线陡峭，让很多初学者望而止步。本文将介绍在创建一个 Angular 应用中所使用的一些最佳实践。一、核心概念Angular 中最重要的三个概念是：模块、服务和组件：模块：用于打包发布组件和服务服务：用于添加应用逻辑组件：用于管理 HTML 模板模块是一个带有@NgModule装饰器的类。每一个 Angular 应用都有一个根模块（AppModule），根据应用规模，可能还有核心模块（CoreModule）、共享模块（SharedModule）和一些特性模块（Feature Module）。import{NgModule}from'@angular/core';import{CommonModule}from'@angular/common';import{FlexLayoutModule}from'@angular/flex-layout';import{MaterialModule}from'./material.module';// import modules, compo
...继续阅读
(17)
发表于
2017-06-04 21:20:46
Angular 4 表单快速入门
主要内容第一节 - 创建最简单的输入框第二节 - 添加简单的验证功能第三节 - 显示验证失败的错误信息第四节 - 创建表单第五节 - ngModelGroup简介第六节 - 表单添加验证状态样式第七节 - 表单控件的状态第八节 - 使用单选控件第九节 - 使用多选控件阅读须知本教程的开发环境及开发语言：Angular 4 +Angular CLITypeScript基础知识Angular CLI 基本使用安装Angular CLI(可选)npm install -g @angular/cli创建新的项目ng new PROJECT-NAME启动本地服务器cd PROJECT-NAME
ng serveAngular Forms 简介Angular 4 中有两种表单：Template Driven Forms - 模板驱动式表单 (类似于 AngularJS 1.x 中的表单 )Reactive Forms - 响应式表单本文主要介绍 Template Driven Forms (模板驱动式表单) 的基础知识，相关的知识点会以问答的形式进行介绍。第一节 - 创建最简单的输入框如何实现双向绑定？在 Angular 表单中，我们通过ngModel指令来实现双向绑定。import { Component } from '@angular/core';
@Component({
sel
...继续阅读
(25)
发表于
2017-06-02 02:47:35
React 的 lifecycle(生命周期)
发表于
2017-06-01 02:34:05
react import 问题
我代码如下：
index.jsimport React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Header from './header';
import './index.scss';
class App extends Component {
render() {
return (</Header>);
}
}
const app = window.document.getElementById('app');
ReactDOM.render(, app)
;
header.js
```js
import React, { Component } from 'react';
export default class Header extends Component {
render() {
return (fuck
</section>);
}
}两个文件中我必须显式import React而且R必须大写，写成小
...继续阅读
(11)
发表于
2017-05-27 18:21:49
Angular动态加载组件
引言有时候需要根据URL来渲染不同组件，我所指的是在同一个URL地址中根据参数的变化显示不同的组件；这是利用Angular动态加载组件完成的，同时也会设法让这部分动态组件也支持AOT。动态加载组件下面以一个Step组件为示例，完成一个3个步骤的示例展示，并且可以通过URLuser?step=step-one的变化显示第N个步骤的内容。1、resolveComponentFactory首先，还是需要先创建动态加载组件模块。import { Component, Input, ViewContainerRef, ComponentFactoryResolver, OnDestroy, ComponentRef } from '@angular/core';
@Component({
selector: 'step',
template: ``
})
export class Step implements OnDestroy {
private currentComponent: ComponentRef;
constructor(private vcr: ViewContainerRef, private cfr: ComponentFactoryResolver) {}
@Input() set data(data: { component: any, in
...继续阅读
(7)
发表于
2017-05-27 09:51:44
了解State、Props，学会React
State Props——React的关键所在原文《State Props——React的关键所在》只有 State，Props，仅此而已。React 只有 State（状态）、Props（属性），仅此而已。就是这么简单。所以说，如果你会 JS，也了解了 State（状态）和 Props（属性）。那么就可以你已经掌握了 React 大部分知识了。在 State，Props 之前，先来看一下 React 的基础。JSXconst element =Hello, world!</h1>;This funny tag syntax is neither a string nor HTML.It is called JSX, and it is a syntax extension to JavaScript.const element =Hello, world!;这样的表达式就是 JSX 。它是 JavaScript 语法的延伸。在 JSX 中，允许将 JS 代码和 HTML 标签一起使用。这样就可以使用熟悉 JS 来展开逻辑，使用熟悉的 HTML 来呈现 UI。不过这里有一点，就是一个 JSX 只能有一个根节点。所谓一个根节点，就是 HTML 最外面有且只有一个 HTML 标签。const element = (Hello</div>world!)像这样就是错误的
...继续阅读
(5)
发表于
2017-05-24 19:45:33
从零学React Native之08Image组件
发表于
2017-05-19 20:58:13
老实巴交的vue-router教程
发表于
2017-04-27 21:02:01
Vue 2.0 入门系列（11）双向绑定其他元素以及自定义表单控件
发表于
2017-04-27 17:56:35
reactjs前端实践｜第三篇：TodoList示例事件、state、props、refs
实践三Todo List示例，未使用redux。内容涉及到展示组件与容器组件的合理使用，事件处理，参数传递，控件访问，组件功能设计等方面。其中遇到的坎，设置输入焦点，由于使用了styled-components而有不同;每个组件应试包含哪些state，是否应该进行状态提升;子组件如何向父组件传递数据。代码分析组件拆分：Li单个信息条目、LiList信息条目列表、InputAndButton输入组件、App容器组件。App的State包含一个item数组，存放信息列表;InputAndButton的State包含一个inputValue变量，存入用户本次输入的信息。其它组件不含State，为展示组件。展示组件Li.js，展示一条信息，数据来自父组件const Li = (props) => {
return ({props.text}//此处不能加key（但父组件要向它传递），否则会有警告
);
};
export default Li;LiList.js，展示信息列表，因为输入组件也会修改数据，所以state提升到容器组件中。const LiList = (props)=>{
return ({props.items.map((item)=>{ //map方法来完成列表构建
return;
...继续阅读
(10)
发表于
2017-04-27 17:20:37
vue-sina-emotion新浪表情面板的vue组件
发表于
2017-04-25 11:17:39
Angular 4.x 动态创建表单
发表于
2017-04-22 11:53:20
用react + webpack + es6 做了个新闻网站，视频教程也无私奉献
React-news一个基于 React + Webpack + es6 + Babel + ant-design 的新闻站点项目主页Github-react_news_site演示地址ReactNews写在前面之前自学过前端自动化工具和angular，但一直没有搭建过一个完整的项目，于是这次认真的做了个基于react新闻网站，自动化工具采用webpack，由于使用了es6的语法，需要用到Babel，Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码。此项目是根据慕课网教程仿制的，通过此项目也确实学到了很多东西，现在分享出来，也算是我的一个学习总结，完整的视频教程链接对了，觉得好的话不要吝啬你的star哦~~ (✪ω✪)效果图适配了移动端，pc端直接打开上面的链接移动端 预览直接扫码打开网页运行项目安装依赖npm install进入开发模式npm run dev
// or
webpack-dev-server --inline --hot
// 之后打开 localhost:8080 查看如果还没安装node的同学，可把 index.html 里的 script 改成下面的形式，然后直接打开index.html即可webpack配置webpack是一款模块加载器兼打包 工具，它能把各种资源，例如JS（含JSX）、coffee、
...继续阅读
(3)
发表于
2017-04-21 16:20:00
Angular 4.x Events Bubbling
Angular 组件和 DOM 元素通过事件与外部进行通信， Angular 事件绑定语法对于组件和 DOM 元素来说是相同的 - (eventName)="expression" ：ClickDOM ELEMENTSDOM 元素触发的一些事件通过 DOM 层级结构传播。这种传播过程称为事件冒泡。事件首先由最内层的元素开始，然后传播到外部元素，直到它们到根元素。DOM 事件冒泡与 Angular 可以无缝工作，具体示例如下：import { Component } from '@angular/core';
@Component({
selector: 'exe-app',
template: `Click`
})
export class AppComponent {
onClick() {
console.log('Click');
}
}以上代码成功运行后，当用户点击Click按钮，浏览器控制台将会输出：Click即表示元素上设置的监听函数被执行，也间接证明了事件冒泡能正常工作。Angular ComponentAngular 允许开发者通过@Output()装饰器和EventEmitter自定义事件。它不同于 DOM 事件，因为它不支持事件冒泡。在介绍自定义事件前，我们先来看一下自定义组件如何监听 DOM 事件。event-bubbling.co
...继续阅读
(3)
发表于
2017-04-17 12:38:38
手把手教你封装一个vue component
发表于
2017-04-14 18:23:14
Angular 4.x 自定义表单控件
发表于
2017-04-07 13:52:20
[译]基于 React Router 4 的可复用 Layout 组件
本文翻译自：Reusing layouts in React Router v4在React Router V4应用中，希望在每个路由上呈现一些默认的组件，比如页眉和页脚：Page Header{content that changes}Page Footer在最新版本的 React Router V4 中可以很容易实现这一点，通过为特定的用例创建子布局。创建默认布局我们把每个页面都使用的布局作为默认布局。当页面路由和地址栏匹配的时候，React router 会调用render属性的函数：// 调用组件的常规方式// 使用 render 属性可以最组件做一些自定义操作} />这是非常有用的，因为我们可以把这些组件放到中，然后控制哪些组件应该被渲染，同时把Route的属性传递给子组件：const DefaultLayout = ({component: Component, ...rest}) => {
return ((HeaderFooter)} />
)
};rest参数包含了需要传递给DefaultLayout的除了component以外的所有属性，所以我们可以把这些属性从Route转发到底层组件。通过向Route组件提供render属性，我们可以控制component属性的渲染。在这种情况下，我们将其包含在包含页眉和页脚的 HTML 中，但这可能只是把其他组件做了
...继续阅读
(6)
发表于
2017-04-06 10:16:48
Angular 2 Components Communicate
本文介绍的内容是组件通信的常用方式：@Input、@Output、@ViewChild、模板变量、MessageService、Broadcaster (Angular 1.x $rootScope 中 $on、$broadcast ) 和 Pub - Sub 模式、RxJS Subject 存在的问题。输入属性 (父组件 -> 子组件)counter.component.tsimport { Component, Input } from '@angular/core';
@Component({
selector: 'exe-counter',
template: `当前值: {{ count }}+-`
})
export class CounterComponent {
@Input() count: number = 0;
increment() {
this.count++;
}
decrement() {
this.count--;
}
}app.component.tsimport { Component } from '@angular/core';
@Component({
selector: 'exe-app',
template: ``
})
export
...继续阅读
(13)
发表于
2017-04-02 09:38:40
一个新手司机眼里的 Vue
