react中，import导入文件怎么理解，与css中的import有区别吗

Question

react中，import导入文件怎么理解，与css中的import有区别吗

Answer 1

一个组件，有自己的结构，有自己的逻辑，有自己的样式，会依赖一些资源，会依赖某些其他组件。比如日常写一个组件，比较常规的方式：

－ 通过前端模板引擎定义结构

－ 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>);
}
});

Answer 2

函数式编程

内联 内嵌 外链 导入。
区别 ：同时加载。
前者无兼容性，后者CSS2.1以下浏览器不支持。
Link 支持使用javascript改变样式，后者不支持。