如何科学的组织Reactreact 组件样式式

来源：蜘蛛抓取(WebSpider) 时间：2016-09-09 03:32 标签： react 组件库
酷勤网 C 程序员的那点事！
当前位置： >
浏览次数：次
预计阅读时间: 9 分钟
虚拟DOM是React的基石。
引入虚拟DOM，一方面是性能的考虑。Web应用和网站不同，一个Web应用 中通常会在单页内有大量的DOM操作，而这些DOM操作很慢。
在React中，应用程序在虚拟DOM上操作，这让React有了优化的机会。简单说， React在每次需要渲染时，会先比较当前DOM内容和待渲染内容的差异， 然后再决定如何最优地更新DOM。这个过程被称为reconciliation。
React对象的三个重要方法：
createElement(type,[props],[children&])
在虚拟DOM上创建指定的React元素参数type用来指定要创建的元素类型，可以是一个字符串或一个React组件类型。当使用字符串时，这个参数应当是标准的HTML标签名称，比如：p、div、canvas等等。
参数props是可选的JSON对象，用来指定元素的附加属性，比如样式、CSS类等等。 我们在示例中简单的设置为null。
从第三个参数children开始的所有参数，都被认为是这个元素的子元素。
var el = React.createElement(
React.createElement(&li&,null,&China&),
React.createElement(&li&,null,&Japan&),
React.createElement(&li&,null,&Korea&)
render(element,container,[callback])
将虚拟DOM上的对象渲染到真实DOM上 参数element是我们使用createElement()方法创建的React元素，注意，不是HTML元素！
参数container是真实DOM中的HTML元素，作为渲染的目标容器，它的内容将被render()方法 的执行改变。
callback参数是可选的函数，当渲染完成或更新后被执行，通常我们不用它。
React.createClass(meta)
参数meta是一个实现预定义接口的JavaScript对象，用来 对React组件原型进行扩展。
在meta中，至少需要实现一个render()方法，而这个方法， 必须而且只能返回一个有效的React元素。
render:function(){
return React.createElement(
&div&,null,
React.createElement(&div&,null,&header&),
React.createElement(&div&,null,&content&),
React.createElement(&div&,null,&footer&)
&React 的 JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签。
要渲染 HTML 标签，只需在 JSX 里使用小写字母开头的标签名
var myDivElement = &div className=&foo& /&;
React.render(myDivElement, document.body);
要渲染 React 组件，只需创建一个大写字母开头的本地变量。
var MyComponent = React.createClass({/*...*/});
var myElement = &MyComponent someProperty={true} /&;
React.render(myElement, document.body);
JSX 把类 XML 的语法转成纯粹 JavaScript
// 输入 (JSX):
var app = &Nav color=&blue& /&;
// 输出 (JS):
var app = React.createElement(Nav, {color:&blue&});
//注意，要想使用 &Nav /&，Nav 变量一定要在作用区间内。
JSX 也支持使用 XML 语法定义子结点
var Nav, P
// 输入 (JSX):
var app = &Nav color=&blue&&&Profile&click&/Profile&&/Nav&;
// 输出 (JS):
var app = React.createElement(
{color:&blue&},
React.createElement(Profile, null, &click&)
JavaScript 表达式
属性表达式
要使用 JavaScript 表达式作为属性值， 只需把这个表达式用一对大括号 ({}) 包起来，不要用引号 (&&)。
// 输入 (JSX):
var person = &Person name={window.isLoggedIn ? window.name : ''} /&;
// 输出 (JS):
var person = React.createElement(
{name: window.isLoggedIn ? window.name : ''}
子节点表达式
// 输入 (JSX):
var content = &Container&{window.isLoggedIn ? &Nav /& : &Login /&}&/Container&;
// 输出 (JS):
var content = React.createElement(
Container,
window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
你只需要在一个标签的子节点内(非最外层)小心地用 {} 包围要注释的部分。
var content = (
{/* 一般注释, 用 {} 包围 */}
name={window.isLoggedIn ? window.name : ''} // 行尾注释
参考文章：
& 相关主题：

我要回帖

更多关于 react 组件库 的文章

 

随机推荐