react.JS基础
2021-06-28 09:06
标签：引号 rip meta lan 解析 alt 自动 语言 find 1、ReactDOM.render() React.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。 2、jsx语法 HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写。 运行结果： 运行结果： 3、组件 React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类。 运行结果： 上面代码中，变量 HelloMessage 就是一个组件类。模板插入 组件的用法与原生的 HTML 标签完全一致，可以任意加入属性，比如 this.props.children 属性，它表示组件的所有子节点。 运行结果： 5、React.findDOMNode() 组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。但是，有时需要从组件获取真实 DOM 的节点，这时就要用到 React.findDOMNode 方法。 6、this.state 组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI。 上面代码是一个 LikeButton 组件，它的 getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。 由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。 7、表单 react.JS基础 标签：引号 rip meta lan 解析 alt 自动 语言 find 原文地址：http://www.cnblogs.com/flower-qh/p/7143441.html 1 DOCTYPE html>
2 html>
3 head>
4 meta charset="utf-8" />
5 title>title>
6 script type="text/javascript" src="js/react.js">script>
7 script type="text/javascript" src="js/react-dom.js">script>
8 script type="text/javascript" src="js/browser.min.js">script>
9 style type="text/css">
10 #example{width: 300px;height: 100px;background: lightblue;}
11 style>
12 head>
13 body>
14 div id="example">div>
16 script type="text/babel">
17 ReactDOM.render(
18 p>测试reactdom.render/p>,
19 document.getElementById("example")
20 )
21 script>
22 body>
23 html>
运行结果：
1 DOCTYPE html>
2 html>
3 head>
4 meta charset="utf-8" />
5 title>title>
6 script type="text/javascript" src="js/react.js">script>
7 script type="text/javascript" src="js/react-dom.js">script>
8 script type="text/javascript" src="js/browser.min.js">script>
9 style type="text/css">
10 #example{width: auto;height: 100px;background: lightblue;}
11 style>
12 head>
13 body>
14 div id="example">div>
15 script type="text/babel">
16 var names=[‘AAA‘,‘BBB‘,‘CCC‘];
17 ReactDOM.render(
18 div>
19 {
20 names.map(function(name,index){
21 return div key={index}>Hello,{name}!/div>
22 })
23 }
24 /div>,
25 document.getElementById("example")
26 )
27 script>
28 body>
29 html>
body>
div id="example">div>
script type="text/babel">
var arr=[
h1 key="1">Hello world!/h1>,
h2 key="2">I love react!/h2>,
];
ReactDOM.render(
div>{arr}/div>,
document.getElementById("example")
)
script>
body>
1 body>
2 div id="example">div>
3 script type="text/babel">
4 var HelloMessage = React.createClass({
5 render:function(){
6 return h1>Hello {this.props.name}/h1>
7 }
8 });
9 ReactDOM.render(
10 HelloMessage name = "John" />,
11 document.getElementById("example")
12 )
13 script>
14 body>
4、this.props.children
1 body>
2 div id="example">div>
3 script type="text/babel">
4 var NotesList = React.createClass({
5 render: function() {
6 return(
7 ol>
8 {
9 React.Children.map(this.props.children,function(child){
10 return li>{child}/li>;
11 })
12 }
13 /ol>
14 );
15 }
16 });
17 ReactDOM.render(
18 NotesList>
19 span>hello/span>
20 span>world/span>
21 /NotesList>,
22 document.getElementById("example")
23 );
24 script>
25 body>
1 body>
2 div id="example">div>
3 script type="text/babel">
4 var MyComponent = React.createClass({
5 handleClick:function(){
6 this.refs.myTextInput.focus();
7 },
8 render:function(){
9 return(
10 div>
11 input type="text" ref="myTextInput" />
12 input type="button" value="Focus the text input" onclick={this.handleClick} />
13 /div>
14 );
15 }
16 });
17
18 ReactDOM.render(
19 MyComponent/>,
20 document.getElementById(‘example‘)
21 )
22 script>
23 body>
运行结果：
1 body>
2 div id="example">div>
3 script type="text/babel">
4 var data = 123;
5 var MyTitle = React.createClass({
6 propTypes: {
7 title: React.PropTypes.string.isRequired,
8 },
9 render: function() {
10 return h1> {this.props.title} /h1>;
11 }
12 });
13 ReactDOM.render(
14 MyTitle title={data} />,
15 document.getElementById(‘example‘)
16 );
17 script>
18 body>
运行结果：
1 body>
2 div id="example">div>
3 script type="text/babel">
4 var LikeButton = React.createClass({
5 getInitialState: function() {
6 return {liked: false};
7 },
8 handleClick: function(event) {
9 this.setState({liked: !this.state.liked});
10 },
11 render: function() {
12 var text = this.state.liked ? ‘like‘ : ‘haven\‘t liked‘;
13 return (
14 p onClick={this.handleClick}>
15 You {text} this. Click to toggle.
16 /p>
17 );
18 }
19 });
20 ReactDOM.render(
21 LikeButton />,
22 document.getElementById(‘example‘)
23 );
24 script>
25 body>
1
2
3
12