var LikeButton = React.createClass({ getInitialState: function() { /* * 设置状态的初始值 * */ return {liked: false}; }, handleClick: function() { /* * 更改状态 * */ this.setState({liked: !this.state.liked}); }, render: function() { var text = this.state.liked ? ‘喜欢' : ‘不喜欢'; return ( <p onClick={this.handleClick}> 你 {text} 他. 点击切换. </p> ); } }); ReactDOM.render( <LikeButton />, document.getElementById(‘example') );
由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。
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.body);
组件 API
组件的7个方法:
设置状态：setState；
替换状态：replaceState；
设置属性setProps；
替换属性replaceProps；
强制更新：forceUpdate；
获取DOM节点：getDOMNode；
判断组件挂载状态：isMounted。
组件生命周期
初始化
getDefaultProps：设置默认性的值
getInitialState：设置初始的状态
componentWillMount：（组件即将被装载）
render（渲染）
componentDidMount：组件已经被装载，只会在第一个组件被调用的时候出发
运行中
componentWillReceiveProps 在组件将要接收到属性的时候，接收属性前
shouldComponentUpdate 在接收到新的 props 或者 state，将要渲染之前调用。该方法在初始化渲染的时候不会调用
componentWillUpdate render 触发之前，更新
render 渲染
componentWillUnmount 在组件从 DOM 中移除的时候立刻被调用
销毁
componentWillUnmount 在组件从 DOM 中移除的时候被立刻调用
var Hello = React.createClass({ getInitialState: function () { return { opacity: 1.0 }; }, componentDidMount: function () { this.timer = setInterval(function () { var opacity = this.state.opacity; opacity -= .05; if (opacity < 0.1){ opacity = 1.0; } this.setState({ opacity: opacity }); }.bind(this), 100); }, render: function () { return ( <div style={{opacity: this.state.opacity}}> Hello {this.props.name} </div> ); } }); ReactDOM.render( <Hello name=“world”/>, document.body );
因为 React 组件样式是一个对象第一重大括号表示这是 JavaScript 语法，第二重大括号表示样式对象
Ajax
上面代码没有使用 jQuery 完成 Ajax 请求，这是为了便于说明。React 本身没有任何依赖，完全可以不用jQuery，而使用其他库。
var Input = React.createClass({ getInitialState: function () { return {users:[]} }, componentDidMount:function(){ var _this = this; $.get(“:8080/users?act=get”,function (data){ console.log(data); _this.setState({ users:data }); }); }, render: function () { var users = this.state.users; console.log(users); return <table> { users.map(function (user,key){ return <tr key={key}><td>{user.firstName}</td><td>{user.lastName}</td></tr> }) } </table> } }); ReactDOM.render(<Input/>,document.getElementById(“test”));
以上所述是小编给大家介绍的React的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: