摘要
react 学习包括几个部分：
- 文本渲染
- JSX 语法
- 组件化思想
- 数据流
JSX 语法
1. 定义
JSX 是javascript + xml 的合集，我们可以将javascript 与 html 一起编写， 封装页面组件的html 格式与业务逻辑。但使用 JSX 时，一定要编写成能精确定义和反应组件及属性的树状结构，避免无法解析，虽然目前还没遇到过无法解析的情形。
2. 如何区分javascript 与 xml
JSX 代码中 以 {} 包含的为 javascript 代码， <> 包含的为 html 代码，解析时采用对应的语法解析器
3. React 模块
约定分别使用首字母大、小写来区分本地模块的类和 HTML 标签。
- html 标签，JSX 中以小写字母开头
- react 组件，JSX 中以大写字母开头
<body>
<div id="HelloWorld"></div>
<div id="HelloWorld1"></div>
</body>
<script src="../build/react.js"></script>
<script src="../build/JSXTransformer.js"></script>
<script type="text/jsx">
var hw = <div>hello,world</div>;
var HelloWorld = React.createClass({
clickHandler: function() {
console.log(this.props);
console.log('yes, click event has been fired!');
},
render: function() {
return (
<p onClick={this.clickHandler}>
你好，{this.props.name}, 欢迎大驾光临！
</p>
);
}
});
React.render(
<HelloWorld name={'huxiaoyun'} />,
document.getElementById('HelloWorld')
);
React.render(
hw,
document.getElementById('HelloWorld1')
);
</script>
4. html 属性
自定义属性采用data 开头， 比如 data-index 表示此dom 节点的序列号
5. 注意点
-
前面的代码都用了JSXTransformer.js，发布时一定要提前编译为javascript，可安装 react-tools 进行转化，自动化工具也可使用gulp 对应的插件gulp-react
-
JSX 其实是一种语法糖，它将JSX 代码翻译成javascript，某些情况无法实现，如下面
<body>
<div id="HelloWorld"></div>
</body>
<script src="../build/react.js"></script>
<script src="../build/JSXTransformer.js"></script>
<script type="text/jsx">
var a = true;
// 不正确写法，暂不知道原因
// var helloWorld = <div id=if (a) { 'success'} else { 'fail'}>hehehe</div>;
// var helloWorld = <div>{if (a) <div id='success'>Hello World!</div> else <div>Hello World!</div>}</div>;
// 正确写法
var helloWorld = <div>{a ? <div id='success'>Hello World!</div> : <div>Hello World!</div>}</div>;
React.render(
helloWorld,
document.getElementById('HelloWorld')
);
</script>
-
不支持某些html 属性，如 class for , JSX 中替换为 className htmlFor
-
JSX 大小写敏感
比如 onClick 如果写成 onclick 是无法触发事件的
<body>
<div id="HelloWorld"></div>
</body>
<script src="../build/react.js"></script>
<script src="../build/JSXTransformer.js"></script>
<script type="text/jsx">
var HelloWorld = React.createClass({
clickHandler: function() {
console.log(this.props);
console.log('yes, click event has been fired!');
},
render: function() {
return (
<p onClick={this.clickHandler}>
你好，{this.props.name}, 欢迎大驾光临！
</p>
);
}
});
React.render(
<HelloWorld name={'huxiaoyun'} />,
document.getElementById('HelloWorld')
);
</script>
- 行内样式时不能采用引号的书写方式，正确方式如下
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>行内样式</title>
<style type="text/css">
.big {
font-size: 20px;
}
</style>
</head>
<body>
<div id="HelloWorld"></div>
</body>
<script src="../build/react.js"></script>
<script src="../build/JSXTransformer.js"></script>
<script type="text/jsx">
var HelloWorld = React.createClass({
render: function() {
return (
<p style={{color:'red'}} className="big">
你好，{this.props.name}, 欢迎大驾光临！
</p>
);
}
});
React.render(
<HelloWorld name={'huxiaoyun'} />,
document.getElementById('HelloWorld')
);
</script>
- html 格式文本展示，举个例子：
<body>
<div id="HelloWorld"></div>
</body>
<script src="../build/react.js"></script>
<script src="../build/JSXTransformer.js"></script>
<script type="text/jsx">
var HelloWorld = React.createClass({
render: function() {
return (
<p>
你好，{this.props.name}, 欢迎大驾光临！
</p>
);
}
});
// 转义
// var content = <div>huxiaoyun</div>;
// 不转义，作字符串输出
var content = '<div>huxiaoyun</div>';
React.render(
<HelloWorld name={content} />,
document.getElementById('HelloWorld')
);
</script>