React 入门总结（JSX与组件）
第一印象开发代码 demo.html <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello,world!</h1>,document.getElementById('example')
);
</script>
</body>
</html>
开发代码将 JSX 转换后，上线的代码： helloworld.js ReactDOM.render(
React.createElement('h1',null,'Hello,world!'),document.getElementById('example')
);
demo.html <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<!-- No need for Babel! -->
</head>
<body>
<div id="example"></div>
<script src="build/helloworld.js"></script>
</body>
</html>
React是什么React 是一个 UI 库，具体说 React 是做 UI 组件的 JavaScript 库，也就是用 JS 写前端UI。不同于 Angular 是一个完整的框架，React 仅仅只是 VIEW 层。 hello 组件 var Hello = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
ReactDom.render(<Hello name="World" />,document.getElementById('container'));
Timer 组件 var Timer = React.createClass({
getInitialState: function() {
return {secondsElapsed: 0};
},tick: function() {
this.setState({secondsElapsed: this.state.secondsElapsed + 1});
},componentDidMount: function() {
this.interval = setInterval(this.tick,1000);
},componentWillUnmount: function() {
clearInterval(this.interval);
},render: function() {
return (
<div>Seconds Elapsed: {this.state.secondsElapsed}</div>
);
}
});
ReactDom.render(<Timer />,document.getElementById('container'));
Timer 组件结合 webpack 的使用 Hello.jsx定义组件 var React = require('react');
var Timer = React.createClass({
getInitialState: function() {
return {secondsElapsed: 0};
},render: function() {
return (
<div>Seconds Elapsed: {this.state.secondsElapsed}</div>
);
}
});
module.exports = Timer;
index.js使用组件 var React = require('react');
var ReactDom = require('react-dom');
var Timer = require('Timer');
ReactDom.render(<Timer />,document.getElementById('container'));
优势
四个概念
这是 react 四个主要的知识点。本文只简单介绍总结 JSX 和组件。 JSXJSX 语法是类似 Html 的xml格式。注意和 Html 语法不太一样，比如必须是驼峰命名，以及属性名不能和 JS 关键字冲突，例如：className，readOnly。 一、JSX 是可选的 使用 JSX var HelloMessage = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
ReactDOM.render(<HelloMessage name="John" />,mountNode);
不使用 JSX "use strict";
var HelloMessage = React.createClass({
displayName: "HelloMessage",render: function render() {
return React.createElement(
"div","Hello ",this.props.name
);
}
});
ReactDOM.render(React.createElement(HelloMessage,{ name: "John" }),mountNode);
二、JSX 嵌入变量 可以通过 {变量名} 来将变量的值作为属性值 var HelloMessage = React.createClass({
render: function() {
return <div>name: {this.props.name},age: {this.props.age}</div>;
}
});
var user = {"name":"jack",age:29};
ReactDOM.render(<User user={user} />,mountNode);
三、JSX 熟悉扩散 JSX Spread Attributes 可以用通过 {...obj} 来批量设置一个对象的键值对到组件的属性，注意顺序,因为熟悉可以被覆盖 var HelloMessage = React.createClass({
render: function() {
return <div>name: {this.props.name},age:29};
ReactDOM.render(<User {...user} name="override name"/>,mountNode);
四、属性值可以使用 Javascript 表达式 return (
<nav>
<Home />
{loggedIn ? <LogoutButton /> : <LoginButton />}
</nav>
);
五、需要自闭组件（标签）Self-Closing Tag 组件（标签）需要闭合。 var HelloMessage = React.createClass({
render: function() {
return (
<div>
<MyComponent /> //valid
<MyComponent > //invalid
<img src="#" /> //valid
<img src="#" > //invalid
</div>
);
}
});
六、一个组件只能返回一个跟节点 Maximum Number of JSX Root Nodes 组件的render函数只能返回一个根节点，如果包含多个子组件，需要使用div或者span或者其他组件包裹。 //valid
var HelloMessage = React.createClass({
render: function() {
return (
<div>
<MyComponent />
<img src="#" />
</div>
);
}
});
//invalid
var HelloMessage = React.createClass({
render: function() {
return (
<MyComponent />
<img src="#" />
);
}
});
七、JSX中的 false 常见的三种场景
这里不会渲染成字符串 false 作为div的子组件。这种做法类似我们常见的一种用法： <div>{x > 1 && 'You have more than one item'}</div>
组件组件有两个核心的概念：
开发组件时，应该让状态尽可能的少，但能完全表达整个UI，这样组件逻辑就容易维护。 无状态组件（stateless function）: 使用纯粹的函数可以定义无状态的组件。这种组件只是简单的从外面接受 props 渲染 DOM。 var React = require('react');
require('../css/gotop.css');
//Stateless functional components
var Top = function () {
return (
<div className="back-top">
<a className="code">
<div className="code-box"><i></i><img src="http://cdn.tig.qq.com/images/wwq_wx_qrcode.jpg" alt="玩物圈微信二维码"/></div>
</a>
<a href="#top" className="top"></a>
</div>
);
};
module.exports = Top;
通常的做法是：一个顶级父组件为中包括状态和逻辑，通过props传递数据给各个子组件，而子组件是没有状态的，子组件只关注数据的渲染。
这种做法在 redux（单向数据流 Flux 模式的一种实现）中显得很明显。 参考文档：
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |