1、使用
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
// ** Our code goes here! **
</script>
</body>
</html>
最后一个<script>的type属性为text/babel，这样可以在其中应用jsx语法。
2、JSX语法
遇到<开头就用HTML规则解析；遇到{开头，就用javascript解析。
3、组件
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage name="John" />,
document.getElementById('example')
);`
-
HelloMessage就是一个组件类，组件类必须以大写字母开头，必须有自己的
render方法，用于输出组件，还必须只能包含一个顶层标签。 -
组件类可以在使用时可以加入任意属性，其加入的属性可以在组件类内部的this.props对象上获取到。
-
this.props.children属性。它表示组件的所有子节点
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.body );
如果当前组件没有子节点，this.props.children就是undefined;如果有子节点，数据类型就是object;如果有多个子节点，数据类型就是array。React提供了一个方法React.Children直接处理this.props.children。
-
PropTypes属性，验证组件实例的属性是否符合要求。在组件类中定义属性:
propsTypes: { title:React.PropTypes.string.isRequired }
如上定义这样的属性后，在使用组件时，就必须在组件上加入一个title属性，且其类型时字符串类型，才能通过验证。 getDefaultProps方法用来设置组件属性的默认值。
4、获取真实DOM节点
组件并不是节点，知识一种数据结构，叫做虚拟DOM。只有插入文档之后，才会变成真实的DOM。根据React的设计，所有DOM变动，都会在虚拟DOM上发生，然后在将实际发生的变动反应在真实的DOM上，这种算法就做DOM diff
要从组件获取真实的DOM节点，这是就需要ref属性
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')
);
this.refs.[refName]就会返回这个真实的DOM节点。
5、this.state
组件类中getInitialState方法用于定义初始状态，这个对象可以通过this.state属性读取，同时this.setState方法可以修改状态值，修改状态值会自动调用render方法渲染组件
写一个简单的表单：
var Input = React.createClass({
getInitialState: function(){//设置初始值
return {value:'Hello!'};
},
handleChange: function(evt){
this.setState({value: evt.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.body)
网友评论