React.js笔记
前端之家收集整理的这篇文章主要介绍了
React.js笔记，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
目录
1创建第一个组件
2 组件嵌套
3 组件的状态
4 组件的通信
5 Ref指向
6 单向数据流
7 React组件生命周期
1创建第一个组件
1.1 花括号{}
花括号{}解析表达式，三元表达式
花括号{}不能出现在Return的第一层
//1 创建第一个组件
var MessageComponent=React.createClass({
render:function(){
return(
<div>
{/*花括号不能出现在return第一层，故用div包起来*/}
{false?<div style={style}>上海大众</div>:<div>Little_Gao</div>}
</div>
);
}
});
1.2 样式
var style={
background:'wheat'
};
<div style={style}>上海大众</div>
<style>
.app{
background: coral;
</style>
<div className="app">上海大众</div>
//变量、className
<div style={style}><MessageComponent/></div>
<div className="app"><MessageComponent/></div>
2 组件
嵌套
<div id="container"></div>
<script type="text/babel">
//第一个组件
var Hello=React.createClass({
//组件嵌套
<div>欢迎来到-<Company/></div>
});
//第二个组件
var Company=React.createClass({
<span>上海大众</span>
//渲染组件
ReactDOM.render(
<Hello/>,
document.getElementById('container'),51)">function(){
console.log('渲染完成');
</script>
3 组件的状态
/*
* 组件状态 state
* 每一次state值改变，都会重新执行render方法，来进行渲染
* diff算法，会来计算哪里发生改变，只重新渲染改变的地方
* */
//创建组件
var Message=React.createClass({
//初始化state
getInitialState:function(){
return({
name:'同济大学'
},51)">changeState:function(){
this.setState({
name:'上海交通大学'
//获得state内的值
<div onClick={this.changeState}>欢迎来到—{this.state.name}</div>
<Message/>,0)">4 组件的通信
——利用state & props
/**
* 组件通讯 props
* 大多数情况下是父组件向子组件通讯的
//父组件
var Parent=React.createClass({
changeText:function(){
//父组件向子组件传name
<div>父组件接受到了:{this.props.name}--><Child changeText={this.changeText} name="斯柯达"/></div>
//子组件
var Child=React.createClass({
<span onClick={this.props.changeText}>子组件接收到了:{this.props.name}</span>
//渲染过程 向父组件传name
<Parent name="上海大众"/>,0)">5 Ref指向
handleClick:function(){
console.log('方法一：'+this.refs.input.value);
console.log("方法二："+this.refs['input'].value)
//return多个标签时，需要用<div>将它们包起来
<input type="text" ref="input"/>
<button onClick={this.handleClick}>点击获取input值</button>
6 单向数据流
.div{
border: 1px solid royalblue;
width: 200px;
height: 100px;
margin-top: 20px;
padding: 10px;
</style>
//input组件
inputContent:''
//设置state
handleChange:function(event){
inputContent:event.target.value
<input onChange={this.handleChange} type="text" />
<Show content={this.state.inputContent}/>
//show组件
var Show=React.createClass({
<div className="div">{this.props.content}</div>
7 React组件生命周期
7.1 初始化阶段
<div id="container"></div>
<script type="text/babel">
/**
* 组件生命周期
* */
//创建组件
var Message=React.createClass({
getDefaultProps:function(){
console.log('getDefaultProps');
},
getInitialState:function(){
console.log('getInitialState');
return({
});
},
componentWillMount:function(){
console.log('组件将要渲染');
},
componentDidMount:function(){
console.log('组件渲染完成');
},
render:function(){
console.log('渲染');
return(
<div>上海大众</div>
);
}
});
//渲染组件
ReactDOM.render(
<Message/>,
document.getElementById('container'),
function(){
console.log('渲染完成');
}
);
</script>
控制台信息：
getDefaultProps
getInitialState
组件将要渲染
渲染
组件渲染完成
渲染完成
