react+native+组件当前状态_壮志凌云
react+native+组件当前状态
react+native+组件当前状态&相关文章
ReactNative的出现，让前端工程师拥有了使用JavaScript编写原生APP的能力。相比之前的Webapp来说，对于性能和用户体验提升了非常多。
但是ReactNative的代码只兼容两个平台（iOS和Android），并没有兼容Web端访问。这里是因为Facebook开发人员认为Web端天生兼容性就巨麻烦，而且平台差异性是注定存在而且也要保留的，所以ReactNative的目标是Learnonce,writeanywhere，而不是Writeonce,runanywhere。
然而Writeonce,runanywhere又是一个刚需。从产品还是用户的角度试想一下，APP的安装成本还是很高的，如何让用户马上体验到你产品的功能再决定是否要安装？此外，尤其是重要的产品，除了APP客户端之外，还要有一套兜底的Web端以便用户在某些特殊场景下使用。ReactNative可以让你写一份代码跑在两个平台，但是你却还要再写一份Web的一模一样的应用。就显得十分蛋疼了。
于是Reactweb就出现了。ReactWeb介绍简单的一句话描述ReactWeb就是：它帮你把ReactNative的组件做了一个Web端的实现，并提供相关打包工具，让你可以直接打包出一份可以跑在Web端的代码。将ReactNative应用创建一个Web版的几个步骤为了重点突出转换过程，这里使用ReactNativeinit的最简Demo来做实验（名字叫Awes代码在/taobaofed/demo/tree/gh-pages/react-web）。ReactWeb已经把ReactNative比较复杂的UIExplorerDemo跑起来了，所以只要你的代码能跑在iOS或者Android上面，你基本不用担心有什么组件上的问题。当然如果有，可以马上提Issue过来，我们有一个小组在支持Reactweb：）。第一步：安装Reactweb并进行相关配置这一步操作主要是安装react-web包以及相关依赖，并配置webpack打包脚本等。
为了简化这一步操作，我们开发了命令行工具react-web-cli只需要执行两行命令即可。同时命令行工具还支持启动调试服务器、打包等功能，在后面介绍。
安装cli工具：
npminstallreact-web-cli-g
安装配置Reactweb等：
react-webinit&当前项目目录&
执行完成之后，会在你项目目录下面npminstall相关库，并自动创建web/webpack.config.js文件，里面有一份写好的配置。此时目录结构为：
├——README.md
├——android/
├——index.android.js
├——index.ios.js
├——ios/
├——package.json
└——web/
└——webpack.config.js第二步：添加入口文件并进行相关配置每个项目都需要有一个入口文件，通常用来引入调用其他组件并初始化项目，比如index.ios.js表示iOS平台上的该项目的入口文件。为了符合ReactNative的文件命名规范，我们创建一个index.web.js作为入口文件，并且需要在webpack中指定该文件为入口文件。打开web/webpack.config.js文件，修改config变量：
varconfig={
src:path.join(ROOT_PATH,'.'),
index:path.join(ROOT_PATH,'index.web'),
然后我们创建index.web.js文件。这个文件其实跟index.ios.js非常像，只是略有不同。主要区别在于：iOS只需要AppRegistry.registerComponent('Awes',=&Awes);即可让Xcode的Native代码接收处理你的JS代码，而Web端是需要插入到DOM节点中才可以用。因此我们需要在index.web.js最下面添加如下代码：
AppRegistry.registerComponent('Awes',=&Awes);
if(Platform.OS=='web'){
varapp=document.createElement('div');
document.body.appendChild(app);
AppRegistry.runApplication('Awes',{
rootTag:app
然后在最上面require部分需要引入Platform组件。这样配置部分就已经处理完成了，执行react-webstart命令即可启动调试服务器啦！
可以随便修改试下，跟ReactNative模拟器里面的体验几乎一样。第三步：测试并打包Web版本代码当你修改开发完，并对Web端也测试好了，就可以打包发布了。react-web-cli工具打包的命令是：
react-webbundle
打包完成后，文件会存放在web/output/目录下面，可以直接打开index.html（如果app有请求操作，需要起本地服务器查看），再检查一下就可以发布了。这个过程中发生了什么？好奇的同学看到这里可能会有一些疑问，上面命令行工具的一些命令做了什么事情？为什么Reactweb将ReactNative代码打包出一份用在Web端的代码？Reactweb安全可靠吗，里面都是什么东西？
这里简单的介绍下Reactweb的实现原理和上面步骤实际做的事情。ReactWeb将ReactNative组件做了Web端的实现React将代码与平台环境分离，多了一层，这样开发者可以在平台环境层面做一些处理，使得同样一份代码适应更多的平台环境等。
比如react-canvas按照React的语法书写代码，在平台环境层面做一些处理（将你React代码运行并用canvas渲染），然后实现特定目标（在移动端提高性能）。
ReactNative中，一份代码能同时跑在iOS和Android上面，也是一样的道理。ReactNative团队在对应平台的Nativeapp上面做了一些处理，使其可以解析执行React语法的代码。
还有同构（isomorphic）的应用，服务器端使用React+Node.js生成HTML，客户端使用React获取进行客户端相关交互和功能，也是一样的道理。
为此，Reactv0.14.x版本开始，专门分成两个库react和react-dom，其实是把对浏览器平台的特殊处理剥离了出来，单独变成了react-dom库。
ReactNative比较特殊的地方在于，组件最底层的实现是Native的实现，所以就不支持span、div等标签。而动画等，也是直接调用Native进行界面渲染。所以不支持Web端，但是绝大部分组件，都是可以用Web技术进行模拟实现。动画可以用CSS3、基础元素可以用同等HTML标签模拟、布局以及兼容性问题可以用CSS来处理，所以Reactweb只需要把ReactNative的组件用Web技术重新实现一遍，借助React这一层，即可实现一份代码运行在多个平台上面。
举一个非常简单的例子，Text组件：
ReactNative的实现是调用了很多ReactNative底层的代码实现的。
对于Web端，输出一行文本使用&span&标签即可，所以Reactweb的实现就直接搞一个&span&标签，绑一些事件什么的就OK了。
在UIExplorerdemo中能跑起来的ReactNative组件，你都可以放心的用。webpack帮你切换打包目标做出了兼容Web端的组件，那打包的时候岂不是要把所有要打包的组件中的require('react-native')全部更换成require('react-web')？不然怎么用的我的Web组件打包？
强大的webpack附带了alias配置项可以帮你解决这个问题：
'react-native':'react-web',
'ReactNativeART':'react-art',
extensions:['','.js','.jsx'],
这样在打包时，但凡require('react-native')的地方全都用react-web包替换，而react-web的module.exports与react-native的保持一致即可让代码不替换也可以工作。
此外配合插件还可以实现另外一种引入方法，请看下面。通过Haste方法引入组件以提高性能webpack以及其他的支持CommonJS规范的打包工具，都会把文件中require的所有组件都打包在一起。对于ReactNative来说代码体积大小无关紧要，而在Mobileweb来说，就要稍微重要一些了。特别是如果你的项目只需要Text组件，但由于require('react-web')结果把所有的组件全部打包进来了，就比较伤感。
基于webpack插件，还可以用另一种方式引入组件以解决这个问题，你可以叫它Haste方式。使用这种方式需要加载webpack插件haste-resolver-webpack-plugin，默认的webpack配置已经帮你加载好了，你可以直接在组件里面这样用：
varText=require('ReactText');
而不是以前那样：
var{Text}=require('react-native');
这样webpack打包时，对于前者，只会把那一个组件内容打包进来，因此可以减小体积、提升性能。这是怎么实现的呢？
加载了插件的webpack打包时，会先扫描所有组件并读取组件头部@providesModule的信息（比如Text组件的信息），然后当其他文件中require了这个组件名称，就会自动定位到这个文件进行打包。同时还可以区分平台，即便是同一个名字，打包时会区分平台去打包对应的文件（根据index.xxx.js的命名规则确定文件）。一些存在的问题在Web端兼容性是个非常麻烦头疼的事情，ReactWeb已经尽力帮你抹平兼容性问题和代码差异，尽可能的让你减少改动就可以创建Web版本的应用。但受限于Web端的一些固有限制（比如请求跨域），不可避免的就会有一些需要你改代码的地方。
为此，可以通过if(Platform.OS=='web')的方式判断目标平台，并针对性的做一些平台兼容性处理。同样的，也可以将web替换为ios或者android判断其他平台。
欢迎踊跃尝试，遇到问题可以随时提Issue哦：）
以下内容已过滤百度推广
日&-&设计react组件与设计一个jquery组件或者一个原生js组件最大的区别就是状态的设计。 术语定义 属性 泛指用户在初始化组件时候可以传给组件的 有些框架...&&普通
日&-&所以你在 app 中使用的按钮是 touchablehighlight,这是一个 react native 组件,...value 属性的值,这个值用于把状态变量 searchstring 的当前值作为展示给用户的...&&普通
日&-&react吸引了越来越多的开发者,基于它的衍生技术,如react native、react canvas等...组件规范中定义了setstate方法,每次调用时都会更新组件的状态,触发...&&普通
日&-&在reactactivity的oncreate这个生命周期里,直接实列化,然后作为当前window的contentview,也就可以认为其是所有react-native组件的根视图。 熟悉androi...&&普通
日&-&现在最热门的前端框架,毫无疑问是 react。 上周,基于 react 的 react native ...组件免不了要与用户互动,react 的一大创新,就是将组件看成是一个状态机,一开始...&&普通
为了对 react native 有一个理想的基本了解,我们将尝试使用尽可能多的不同组件...看看这个!你会注意到当前的文本覆在了状态条上面,我们稍后会修复这个问题。 tabbar...&&普通
日&-&针对menus组件我们覆盖了getinitialstate()方法,返回menus组件的初始状态为{link:...当然对于react本身而言其上手快,易学习以及诸如react native这样...&&普通
日&-&(一个开源 javascript 库)轻松地创建 ui 视图组件,...,表示控制器直接或简介共享的易变的应用程序状态。...扩展至其他目标平台,包括(通过 react native)ios 和...&&普通
日&-&可以基于 react native使用 javascript 编写应用逻辑,ui 则可以保持全是原生的。...每个react 组件都带有一个key-value存储的状态对象,你必须在组件渲...&&普通
日&-&基本上我们用js写代码也是使用这些基本组件来构建我们的ui界面的。除此之外,你...但在react native 中却大相径庭:react native 通过状态机的机制来驱动整个view...&&普通react+nodejs模式，flux和express有什么区别？
react+nodejs模式，目前使用的是express作为框架，react 的flux是单向数据流，具体express和flux之间有什么关系？
建议先学习javascript
已有帐号？
无法登录？
社交帐号登录react在webstorm中无法正确识别处理~~ - CNode技术社区
这家伙很懒，什么个性签名都没有留下。
如图，求解啊~~
突然弹出这框，然后选择switch，over~~
工具太高级了
太高端。。。
可以在设置里加。。
当时以为是默认支持的，我在设置里面找不到囧
Preferences -& Languages and Frameworks -& JavaScript -& language version下拉框里选JSX Harmony : )
赞~看到了，之前是选中了ECMAScript6~
太赞了，感谢，不过在javascript那一项要点击他才行，我是点击的三角，没有找到～～
CNode 社区为国内最专业的 Node.js 开源技术社区，致力于 Node.js 的技术研究。
服务器赞助商为
，存储赞助商为
，由提供应用性能服务。
新手搭建 Node.js 服务器，推荐使用无需备案的