A. react中，import导入文件怎么理解，与css中的import有区别吗
说说React一个组件，有自己的结构，有自己的逻辑，有自己的样式，会依赖一些资源，会依赖某些其他组件。比如日常写一个组件，比较常规的方式：－ 通过前端模板引擎定义结构 － js文件中写自己的逻辑 － CSS中写组件的样式 － 通过RequireJS、SeaJS这样的库来解决模块之间的相互依赖， 那么在React中是什么样子呢？结构和逻辑在React的世界里，结构和逻辑交由JSX文件组织，React将模板内嵌到逻辑内部，实现了一个JS代码和HTML混合的JSX。结构在JSX文件中，可以直接通过 React.createClass 来定义组件：var CustomComponent = React.creatClass({ render: function(){ return (<div className="custom-component"></div>); }});通过这种方式可以很方便的定义一个组件，组件的结构定义在render函数中，但这并不是简单的模板引擎，我们可以通过js方便、直观的操控组件结构，比如我想给组件增加几个节点：var CustomComponent = React.creatClass({ render: function(){ var $nodes = ['h','e','l','l','o'].map(function(str){ return (<span>{str}</span>); }); return (<div className="custom-component">{$nodes}</div>); }});通过这种方式，React使得组件拥有灵活的结构。那么React又是如何处理逻辑的呢？逻辑写过前端组件的人都知道，组件通常首先需要相应自身DOM事件，做一些处理。必要时候还需要暴露一些外部接口，那么React组件要怎么做到这两点呢？事件响应比如我有个按钮组件，点击之后需要做一些处理逻辑，那么React组件大致上长这样：var ButtonComponent = React.createClass({ render: function(){ return (<button>屠龙宝刀，点击就送</button>); }});点击按钮应当触发相应地逻辑，一种比较直观的方式就是给button绑定一个 onclick 事件，里面就是需要执行的逻辑了：function getDragonKillingSword() { //送宝刀}var ButtonComponent = React.createClass({ render: function(){ return (<button onclick="getDragonKillingSword()">屠龙宝刀，点击就送</button>); }});但事实上 getDragonKillingSword() 的逻辑属于组件内部行为，显然应当包装在组件内部，于是在React中就可以这么写：var ButtonComponent = React.createClass({ getDragonKillingSword: function(){ //送宝刀 }, render: function(){ return (<button onClick={this.getDragonKillingSword}>屠龙宝刀，点击就送</button>); }});这样就实现内部事件的响应了，那如果需要暴露接口怎么办呢？暴露接口事实上现在 getDragonKillingSword 已经是一个接口了，如果有一个父组件，想要调用这个接口怎么办呢？父组件大概长这样：var ImDaddyComponent = React.createClass({ render: function(){ return ( <div> //其他组件 <ButtonComponent /> //其他组件 </div> ); }});那么如果想手动调用组件的方法，首先在ButtonComponent上设置一个 ref="" 属性来标记一下，比如这里把子组件设置成 <ButtonComponent ref="getSwordButton"/> ，那么在父组件的逻辑里，就可以在父组件自己的方法中通过这种方式来调用接口方法：this.refs.getSwordButton.getDragonKillingSword();看起来屌屌哒~那么问题又来了，父组件希望自己能够按钮点击时调用的方法，那该怎么办呢？配置参数父组件可以直接将需要执行的函数传递给子组件：<ButtonComponent clickCallback={this.getSwordButtonClickCallback}/>然后在子组件中调用父组件方法：var ButtonComponent = React.createClass({ render: function(){ return (<button onClick={this.props.clickCallback}>屠龙宝刀，点击就送</button>); }});子组件通过 this.props 能够获取在父组件创建子组件时传入的任何参数，因此 this.props 也常被当做配置参数来使用屠龙宝刀每个人只能领取一把，按钮点击一下就应该灰掉，应当在子组件中增加一个是否点击过的状态，这又应当处理呢？组件状态在React中，每个组件都有自己的状态，可以在自身的方法中通过 this.state 取到，而初始状态则通过 getInitialState() 方法来定义，比如这个屠龙宝刀按钮组件，它的初始状态应该是没有点击过，所以 getInitialState 方法里面应当定义初始状态 clicked: false 。而在点击执行的方法中，应当修改这个状态值为 click: true ：var ButtonComponent = React.createClass({ getInitialState: function(){ //确定初始状态 return { clicked: false }; }, getDragonKillingSword: function(){ //送宝刀 //修改点击状态 this.setState({ clicked: true }); }, render: function(){ return (<button onClick={this.getDragonKillingSword}>屠龙宝刀，点击就送</button>); }});这样点击状态的维护就完成了，那么render函数中也应当根据状态来维护节点的样式，比如这里将按钮设置为 disabled ，那么render函数就要添加相应的判断逻辑：render: function(){ var clicked = this.state.clicked; if(clicked) return (<button disabled="disabled" onClick={this.getDragonKillingSword}>屠龙宝刀，点击就送</button>); else return (<button onClick={this.getDragonKillingSword}>屠龙宝刀，点击就送</button>);}小节这里简单介绍了通过JSX来管理组件的结构和逻辑，事实上React给组件还定义了很多方法，以及组件自身的生命周期，这些都使得组件的逻辑处理更加强大资源加载CSS文件定义了组件的样式，现在的模块加载器通常都能够加载CSS文件，如果不能一般也提供了相应的插件。事实上CSS、图片可以看做是一种资源，因为加载过来后一般不需要做什么处理。React对这一方面并没有做特别的处理，虽然它提供了Inline Style的方式把CSS写在JSX里面，但估计没有多少人会去尝试，毕竟现在CSS样式已经不再只是简单的CSS文件了，通常都会去用Less、Sass等预处理，然后再用像postcss、myth、autoprefixer、cssmin等等后处理。资源加载一般也就简单粗暴地使用模块加载器完成了组件依赖组件依赖的处理一般分为两个部分：组件加载和组件使用组件加载React没有提供相关的组件加载方法，依旧需要通过 <script> 标签引入，或者使用模块加载器加载组件的JSX和资源文件。组件使用如果细心，就会发现其实之前已经有使用的例子了，要想在一个组件中使用另外一个组件，比如在 ParentComponent 中使用 ChildComponent ，就只需要在 ParentComponent 的 render() 方法中写上 <ChildComponent /> 就行了，必要的时候还可以传些参数。疑问到这里就会发现一个问题，React除了只处理了结构和逻辑，资源也不管，依赖也不管。是的，React将近两万行代码，连个模块加载器都没有提供，更与Angularjs，jQuery等不同的是，他还不带啥脚手架…没有Ajax库，没有Promise库，要啥啥没有…虚拟DOM那它为啥这么大？因为它实现了一个虚拟DOM（Virtual DOM）。虚拟DOM是干什么的？这就要从浏览器本身讲起如我们所知，在浏览器渲染网页的过程中，加载到HTML文档后，会将文档解析并构建DOM树，然后将其与解析CSS生成的CSSOM树一起结合产生爱的结晶——RenderObject树，然后将RenderObject树渲染成页面（当然中间可能会有一些优化，比如RenderLayer树）。这些过程都存在与渲染引擎之中，渲染引擎在浏览器中是于javaScript引擎（JavaScriptCore也好V8也好）分离开的，但为了方便JS操作DOM结构，渲染引擎会暴露一些接口供JavaScript调用。由于这两块相互分离，通信是需要付出代价的，因此JavaScript调用DOM提供的接口性能不咋地。各种性能优化的最佳实践也都在尽可能的减少DOM操作次数。而虚拟DOM干了什么？它直接用JavaScript实现了DOM树（大致上）。组件的HTML结构并不会直接生成DOM，而是映射生成虚拟的JavaScript DOM结构，React又通过在这个虚拟DOM上实现了一个 diff 算法找出最小变更，再把这些变更写入实际的DOM中。这个虚拟DOM以JS结构的形式存在，计算性能会比较好，而且由于减少了实际DOM操作次数，性能会有较大提升
B. react 引入外部json的路径怎么写法
一：创建json 文件 放在 ./data/目录下{ "employees": [ { "FamilyName": "张", "giveName": "三", "salary": 1 }, { "FamilyName": "李", "giveName": "四", "salary": 2 }, { "FamilyName": "王", "giveName": "二", "salary": 3 } ]}二：在index.Android.js文件中读取[javascript] view plain import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Image, Text, TouchableHighlight, TextInput, StatusBar, View } from 'react-native'; import constantData from './data/SimpleSample.json'; export default class ViewProject extends Component { _onChangeText(newText) { console.log('inputed text:' + newText); } componentWillMount() { console.log("constantData taype is ="+typeof(constantData)); console.log("employees taype is ="+typeof(constantData.employees)); console.log("employees length = "+constantData.employees.length); console.log("No.1 givenName ="+constantData.employees[0].giveName); console.log("No.1 FamilyName ="+constantData.employees[0].giveName); console.log("No.1 Salary"+constantData.employees[0].salary); console.log("type of No.1 Salary"+typeof(constantData.employees[0].salary)); } render() { return ( <View style={styles.container}> <Text onChangeText={(newText)=>{this._onChangeText(newText)}} /> </View> ); } } const styles = StyleSheet.create({ container: { flex:1, justifyContent: 'center', alignItems: 'center', backgroundColor:'#F5FCFF' } }); AppRegistry.registerComponent('ViewProject', (
C. reactjs怎么从外部引入组件
1、Chrome 无法支持来，会报错。但自是 Firefox 和 Safari 是可以了。记得加上 type="text/babel"。2、如果想让 Chrome 也能运行，可以开一个本地服务器（比如 Apache），也是可以让 Chrome 支持的。React 文档上也有注明：Note that some browsers (Chrome, e.g.) will fail to load the file unless it's served via HTTP.3、最后，如果不想开本地服务器。那可以使用模块加载器（webpapck 或 browserify）编译 jsx 代码成 js 再引入就行。
D. 如何在react中加入js源码
直接写 react 只是有他的结构要求，而代码很大部分都是直接用原生JS进行数据操作
E. 如何将一个js的数据传入react
React.js 自己的定位是“A JavaScript Library for building user interface”，它的文档称许多人将它用作 MVC 的 V。因此，React.js 不关心你是如何嵌入后端数据的。换句话说，我们怎么使用一个标准的 HTML 元素和后端打交道，就可以把同样的思路运用在 React.js 创造的组件上。比如，一个 input，可以：<input id="name" name="name" value="<?=$name?>">的方式从 PHP 得到变量 $name。一个 React.js 组件也可以形如：ReactDOM.render(React.createElement(HelloMessage, { name: "<?=$name?>" }), mountNode);用标准元素你可以用 AJAX 得到一个值然后（比如用 jQuery 去）操作：$.ajax(…) .done(function(data){ $('#name').val(data.name); });用 React.js 时，同样可以在 AJAX 返回时使用你自己定义的方法去更新组件。关于维护 JSON 信息麻烦的事情，怎么会呢？在 PHP 中 echo $var; 和 echo json_encode($var); 的麻烦程度是一个量级的。
F. react怎样在html中引入js
<script src="react.js"></script><script src="react-dom.js"></script><script src="browser.min.js"></script>react.js 是 React 的核心库react-dom.js 是提供与 DOM 相关的功能，你以后创建的组件都是用它创建Browser.js 的作用是回将 JSX 语法转为答 JavaScript 语法
G. js引入问题 第一行出错 react
看一下相关的文件是否正确的返回可能路径写的不对，然后服务器返回了一个404页面，此时返回的是个html，把它当成js文件执行一般会报这个错
H. react native 怎样让一个js文件能够被其他js文件引用
1、Chrome 无法支持，会报错。但是 Firefox 和 Safari 是可以了。记得加上 type="text/babel"。2、如果想让 Chrome 也能运行，可以开一个本回地答服务器（比如 Apache），也是可以让 Chrome 支持的。3、最后，如果不想开本地服务器。那可以使用模块加载器（webpapck 或 browserify）编译 jsx 代码成 js 再引入就行。
I. 为什么react js需要引入的browser js文件这么大
首先，你并非必需引入browser.js引入它的作用是使浏览器支持babel，你可以使用ES2015（javascript下一代标准，具体可以看阮一峰的ECMAScript 6 入门）进行编码。如果你用ES5，可以不引入为什么这么大你的服务器没有开启gzip，类似cloudflare、七牛都会开启gzip，将浏览器对静态资源请求尽量降到最低（但越低越吃CPU，所以要适量）附 ES6 与 ES5 的区别// The ES5 wayvar Photo = React.createClass({ handleDoubleTap: function(e) { … }, render: function() { … },});// The ES6+ way
J. react项目可以引入jstree插件吗
jstree是基于jquery的插件，是需要和dom元素打交道的。要使用的话需要先引入jquery。你可以在你的react模板页面中直接引入jquery和jstree。在你需要用到的组件里用ref拿到对应元素，调用jstree的初始化方法就可以。一般要在componentDidMount中初始化。
