react使用入门

ReactDOM.render

ReactDOM.render解析组件到dom中

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

React.createClass

React.createClass 方法用于生成一个组件类

var HelloMessage = React.createClass({
	render:function(){
		return <h1>hello world</h1>;
	}
});

React State(状态)

getInitialState方法用于定义初始状态，也就是一个对象，这个对象可以通过this.state属性读取 一般在事件中使用this.setState方法修改状态值，修改完状态值后，会自动调用this.render方法重新渲染组件

var clickNum = React.createClass({
	getInitialState(){
		return {num:0};
	},click(){
		this.setState({num:this.state.num+1})
	},render(){
		return (
			<p onClick={this.click}>
			你点击了<b>{this.state.num}</b>次
			</p>
		)
	}
});

React props

react中父组件通过props传递数据到子组件中

var Hello = React.createClass({
	getDefaultProps(){
		return {name:"瑞秋"}
	},render(){
		return <div>Hello {this.props.name}</div>
	}
});

var SayHello = React.createClass({
	getInitialState(){
		return {name:"杰克"}
	},render(){
		return (
			<div>
				<Hello name="普鲁米修斯" />
				<Hello name={this.state.name} />
				<Hello />
			</div>
		)
	}
})

ReactDOM.render(
	<SayHello />,document.getElementById('app')
);

React 组件API

• 设置状态：setState
• 替换状态：replaceState
• 设置属性：setProps
• 替换属性：replaceProps
• 强制更新：forceUpdate
• 获取DOM节点：findDOMNode
• 判断组件挂载状态：isMounted

因为props是父子组件的通信渠道，为了避免状态不一致，所以严格杜绝组件修改自己的状态，可以通过team.setProps方式修改，这属于组件外修改。replaceProps和setProps类似只能在组件外部修改props，但是replaceProps会替换整个props

var SayHello = React.createClass({
	render(){
		return <div>Hello {this.props.name}</div>
	}
})

var team = React.render(
	<SayHello name="Tom" />,document.getElementById("app")
);

team.setProps({name:"张三"})
setTimeout(function(){
	team.replaceProps({name:"王五"});
},1000)

forceUpdate()方法会使组件调用自身的render()方法重新渲染组件，组件的子组件也会调用自己的render()

var Test = React.createClass({
	getInitialState(){
		return {num:0}
	},update(){
		this.state.num = 99;
		this.forceUpdate(function(){
			console.log("组件的render方法调用后调用")
		})
	},render(){
		return (
			<div><b>{this.state.num}</b><button onClick={this.update}>重新渲染</button></div>
		)
	}
})

React 组件生命周期

• componentWillMount 在渲染前调用,在客户端也在服务端。
• componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout,setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。
• componentWillReceiveProps 在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。
• shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 可以在你确认不需要更新组件时使用。
• componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
• componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
• componentWillUnmount在组件从 DOM 中移除的时候立刻被调用。

var List = React.createClass({
		render(){
			var html = this.props.data.map((item,index)=>
				<li key={index}>
					{item.title}
				</li>
			);
			return <ul>{html}</ul>
		}
	})	
	var App = React.createClass({
		getInitialState(){
			return {
				uri:"https://api.douban.com/v2/movie/top250",title:"",data:[]
			}
		},componentDidMount(){
			this.serverRequest = $.getJSON(this.state.uri+"?callback=?",function(result){
				this.setState({data:result.subjects})
				this.setState({title:result.title})
			}.bind(this));
		},componentWillUnmount(){
			this.serverRequest.about();
		},render(){
			return (
				<div>
					<h1>{this.state.title}</h1>
					<List data={this.state.data} />
				</div>
			)
		}
});

React 表单与事件

设置了输入框 input 值value = {this.state.data}。在输入框值发生变化时我们可以更新 state。我们可以使用 onChange 事件来监听 input 的变化，并修改 state。

import React from "react"

var App = React.createClass({
	getInitialState(){
		return {value:""}
	},headleChange(event){
		this.setState({value:event.target.value})
	},render(){
		return (
			<div>
				<input type="text" value={this.state.value} onChange={this.headleChange} />
				<h4>{this.state.value}</h4>
			</div>
		)
	}
})

export default App

React Refs

React 支持一种非常特殊的属性 Ref ，你可以用来绑定到 render() 输出的任何组件上。 这个特殊的属性允许你引用 render() 返回的相应的支撑实例（ backing instance ）。这样就可以确保在任何时间总是拿到正确的实例

import React from "react"

var App = React.createClass({
	getInitialState(){
		return {value:''}
	},handleClick(){
		this.refs.myInput.focus()
		this.setState({value:this.refs.myInput.value})
	},render(){
		return (
			<div>
				<input type="text" ref="myInput" />
				<input type="button" value="点我输入框获取焦点" onClick={this.handleClick} />
				<h4>{this.state.value}</h4> 
			</div>
		)
	}
})

export default App

推荐学习网站：菜鸟react教程

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!