React学习笔记

API的查询

[]https://facebook.github.io/react/docs/top-level-api.html]

学习主要来自于ruanyifeng老师的demo

[]https://github.com/ruanyf/react-demos]

DEMO1

使用React需要调用：

<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>

另外如果使用React，script的type比较特殊：

<script type="text/babel">

想要进行DOM操作的时候，使用:

ReactDOM.render(a,b)

其中第一个参数是想要输入的HTML文件，第二个参数是DOM的element选中的操作比如：（这个时候其实使用的是JSX)

ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);

DEMO2:

怎么在render的第一个参数中使用javascript?

<>告诉程序是‘我在使用HTML’的标签。

其中如果使用{} 则会被解析为源生javascript

<script type="text/babel">
var names = ['Alice', 'Emily', 'Kate'];

ReactDOM.render(
<div>
{
names.map(function (name) {
return <div>Hello, {name}!</div>
})
}
</div>,
document.getElementById('example')
);
</script>

DEMO3:

如果var是一个数组，使用ReactDOM.render的时候，数组会被合并，例如：

<script type="text/babel">
var names = ['Alice', 'Emily', 'Kate'];

ReactDOM.render(
<div>
Hello, {name}!
</div>,
document.getElementById('example')
);
</script>

上面这个例子，输出就会变成 Hello,AliceEmilyKate

DEMO4:

<script type="text/babel">
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});

ReactDOM.render(
<HelloMessage name="John" />,
document.getElementById('example')
);
</script>

把function压入到tag里面 （6666666666的思想）

利用React.createClass创建了一个名为HelloMessage的tag然后将这个tag所代表的function写在render里面。老节奏,render: function里面的代码用 {}包起来。到了ReactDOM.render的时候，读到HelloMessage的tag会去调用这个function，然后这个function返回真正需要的h1来放到DOM里面。

另外需要HelloMessage这种通过React.createClass的component需要用大写字母开头，不然会报错。还有如果React.createClass中, render出来的components拥有多个平级的tag, 要用一个总tag把他们包起来，

比如

var HelloMessage = React.createClass({
render: function() {
return <div>
<h1>sdfsdfsdf</h1>
<p>sdfsdfsdf</p>
</div>

不然会出问题的！

DEMO5:

<script type="text/babel">
var NotesList = React.createClass({
render: function() {
return (
<ol>
{
React.Children.map(this.props.children, function (child) {
return <li>{child}</li>;
})
}
</ol>
);
}
});

ReactDOM.render(
<NotesList>
<span>hello</span>
<span>world</span>
</NotesList>,
document.getElementById('example')
);
</script>

使用React.createClass创建一个名为NodesList的tag, 使用createClass中的render方法将一个function压入这个tag中，这个function返回的东西是一个ol,ol中的内容是利用React.Children.map方法将NodesList中的children分别变成li的内容。

其中需要注意的是dom树的结构实际为：

<ol>
<li><span>hello</span></li>
<li><span>world</span></li>
</ol>

DEMO6:

关于

<script type="text/babel">
var data = 123;
var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});
ReactDOM.render(
<MyTitle title={data} />,
document.getElementById('example')
);

</script>

在使用React.createClass的时候，除了render还有propTypes这个属性，这个属性为title这个tag设置了一个需要被输入的attribute，而且利用其中的

React.PropTypes.string.isRequired,

还说明了所需数据的数据类型是string,而且是必须需要的，如果没有给出这个值或者给出的值不是我所需要的类型，就会报错。

另外，可以使用getDefaultProps这个属性为React.createClass添加default值，例如:

var MyTitle = React.createClass({
getDefaultProps : function () {
return {
title : 'Hello World'
};
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});

DEMO7

<script type="text/babel">
var MyComponent = React.createClass({
handleClick: function() {
this.refs.myTextInput.focus();
},
render: function() {
return (
<div>
<input type="text" ref="myTextInput" />
<input type="button" value="Focus the text input" onClick={this.handleClick} />
</div>
);
}
});
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);
</script>

其中那个ref是用来在MyComponent中寻找带有ref标签并且refmyTextInput的node.

DEMO8

利用this.state可以来确定当前component的状态，（所以把component可以看做一个状态机？）其中还有比较重要的API的包括：setState()，getInitialState()。

var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? 'like' : 'haven\'t liked';
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}
});

ReactDOM.render(
<LikeButton />,
document.getElementById('example')
);

另外like这个状态其实并没有声明，但是可以直接用。

DEMO9

随时变化：

var Input = React.createClass({
getInitialState: function() {
return {value: 'Hello!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function () {
var value = this.state.value;
return (
<div>
<input type="text" value={value} onChange=  {this.handleChange} />
<p>{value}</p>
</div>
);
}
});
ReactDOM.render(
<Input/>,
document.getElementById('example')
);

状态机的状态为不同的值，每当有变化的时候就产生state的变化。监听变化事件用的是handleChange: function(event) {},

DEMO10