react学习笔记

一，基本格式

1，需要引入的文件

        <!-- react核心库 -->
	<script src="build/react.js"></script>
	<!-- 提供与DOM相关的一些功能 -->
	<script src="build/react-dom.js"></script>
	<!-- 将JSX语法转换成javascript -->
	<script src="build/browser.min.js"></script>

2，DOM节点

	<!-- react渲染的模版内容会插入到这个节点中，作为一个容器 -->
	<div id="container"></div>

3，JSX语法

在react开发中使用JSX，跟javascript不兼容，在使用JSX的地方，要设置type:text/babel

<script type="text/babel">
	// 在此处编写react代码
</script>

JSX不是一门新的语言，是个语法（语法糖）

1，jsx必须借助React环境运行
2，jsx标签其实就是html标签，只不过我们在javascript中书写这些标签的时候，不使用“”括起来，可以像XML一样书写。

3，能够让我们更直观的看到组件的dom结构，不能直接在浏览器上运行，最终会转换成javascript代码。

js写法：

ReactDOM.render(
	React.createElement("h1",null,"你好，react"),
	document.getElementById("container")
)

JSX写法：

var text="aaa";
	ReactDOM.render(
		<h1>{text}</h1>,
		document.getElementById("container")
	)

在JSX中运行javascript代码，使用｛｝括起来  ｛表达式｝

4， ReactDOM.render()

React最基本的方法，用于将模版转换成HTML语言，渲染DOM，并插入制定的DOM节点中。

扫描二维码关注公众号，回复： 129810 查看本文章

ReactDOM.render(
<h1>你好，react</h1>,
document.getElementById("container")
);

3个参数
第一个：模版的渲染内容（HTML形式）
第二个：这段模版需要插入的DOM节点（本程序中，是以ID为container的div节点）
第三个：渲染后的回调，一般不用

二，定义组件

1，组件格式

1>在react中创建的组件类以大写字母开头，驼峰命名发；

2>在React中使用React.createClass方法创建一个组件类；

3>核心代码：每个组件类都必须实现自己的render方法。输出定义号的组件模版；

4>注意：每个组件类只能包含一个顶层标签；

	var HelloMessage = React.createClass({
		render:function(){
			return <h1>Hello react</h1>
		}
	});
		ReactDOM.render(
			//在模版中插入<HelloMessage />会自动生成一个实例
			<HelloMessage />,
			document.getElementById("container")
		)

2，组件样式

1，内敛样式
2，对象样式

3，选择器样式

在react和html5在react和html5中设置样式的书写格式是有区别的

1，html5以‘；’结尾；react以‘，’结尾。

2，html5中key、value都不加引号；react中属于javascript对象，key的名字不能出现“-”，需要使用驼峰命名发。如果value为字符串，需要加引号。

3，html5中，value如果是数字，需要带单位；react中不需要带单位。

<style media="screen">
		.pStyle{
			font-size: 20px;
		}
</style>

在react中，如果要使用选择器样式设置组件样式时，属性名称不能使用class，需要使用className替换。类似的，用htmlFor代替for

// 创建设置h1样式对象
var HStyle= {
	backgroundColor:"green",
	color:"red"
}

var ShowMessage = React.createClass({
	render:function(){
		return (
			// 里面对象，外面语法，不用单位
			<div style={{backgroundColor:"yellow",borderWidth:5,borderColor:"blue",borderStyle:"solid"}}>
					<h1 style={HStyle}>{this.props.firstRow}</h1>
					<p className="pStyle">{this.props.secondRow}</p>
			</div>
		)
	}
});

ReactDOM.render(
	<ShowMessage firstRow='你好' secondRow='react'/>,
	document.getElementById("container")
);

3，复合组件。

// 定义WebName
var WebName = React.createClass({
	render:function(){
		return <h1>百度</h1>;
	}
});

// 定义WebLink组件
var WebLink = React.createClass({
	render:function(){
		return<a href="http://www.baidu.com">baidu</a>
	}
});

var WebShow= React.createClass({
	render:function() {
		return(
			<div>
				<WebName />
				<WebLink />
			</div>
		);
	}
});

ReactDOM.render(
	<WebShow />,
	document.getElementById("container")
)
</script>

三，组件属性

1，props

props是组件自身的属性，一般用于潜逃的内外层组件中，负责传递信息（通常是父组件向子组件传递）。

注意：props对象中的属性与组件的属性一一对应，uyao直接去修改props中属性的值。

        // 定义WebName
	var WebName=React.createClass({
		render:function(){
			return <h1>{this.props.webname}</h1>
		}
	})
	// 定义WebLink
	var WebLink=React.createClass({
		render:function(){
			return <a href={this.props.weblink}>{this.props.weblink}</a>
		}
	})
	//定义WebShow
	var WebShow=React.createClass({
		render:function(){
			return(
				<div>
					<WebName webname={this.props.wname}/>
					<WebLink weblink={this.props.wlink}/>
				</div>
			)
		}
	})
	
	ReactDOM.render(
		<WebShow wname="baidu" wlink="www.baidu.com" />,
		document.getElementById("container")
	)

2，...this.props

props提供的语法糖，可以将父组件的全部属性都复制给子组件。

var Link = React.createClass({
		render:function(){
			return <a {...this.props}>{this.props.name}</a>
		}
	});
	
	ReactDOM.render(
		<link href="http://www.baidu.com" name="中文" />,
		document.getElementById("container")
	);

3，this.props.children

children是一个例外，不是跟组件的属性对应的显示组件的所有子节点

var ListComponent = React.createClass({
		render:function(){
			return(
				<ul>
				{
				/*	列表项数量及内容不确定，在创建模版的时候才能确定
					利用this.props.children从父组件获取需要展示的列表项内容

					获取到列表项内容后，需要遍历children，逐项进行设置
					使用React.Childern.map方法
					返回值：数组对象。这里的数组中的元素是li

					*/
					React.Children.map(this.props.children,function(child){
						// child是遍历得到的父组件的子节点
						return <li>{child}</li>
					})

				}
				</ul>
			);
		}
	});
	ReactDOM.render(
(
		<ListComponent>
		<h1>这是名字</h1>
		<a>www.baidu.com</a>
		</ListComponent>

	),
	document.getElementById("container")
	)

4，属性验证 propTypes

组建类的属性，用于验证组件实例的属性是否复合要求。

var ShowTitle = React.createClass({
	propTypes:{
		//title数据类型必须为字符串类型
		title:React.PropTypes.string.isRequired
	},
	render:function(){
		return <h1>{this.props.title}</h1>
	}
})

ReactDOM.render(
	<ShowTitle title="a"/>,
	document.getElementById("container")
)

5，getDefaultProps

设置组件属性的默认值

var MyTitle=React.createClass({
	getDefaultProps:function (){
		return{
			title:"wyy"
		}
	},
	render:function(){
		return <h1>{this.props.title}</h1>
	}
})
ReactDOM.render(
	<MyTitle />,
	document.getElementById("container")
)

四，表单

1，事件处理

react中的事件名称，首字母小写，驼峰命名法。

	var MyButton=React.createClass({
		handleClick(){
			alert("hehe")
		},
		render(){
			return<button onClick={this.handleClick}>{this.props.buttonTitle}</button>
		}
	})
	ReactDOM.render(
		<MyButton buttonTitle="anniu"/>,
		document.getElementById("container")
	)

2，state 状态

与props一样，都是组件自身属性

var CheckButton=React.createClass({
		//定义初始状态
		getInitialState(){
			return {
				//在这个对象中设置的属性，将会存储在state中
				//默认状态 未选中
					isCheck:false
			}
		},
		//定义事件绑定的方法
		handleChange(){
			//修改状态值，通过this.state读取设置的状态值
			this.setState({
				isCheck:!this.state.isCheck
			})
		},
		render(){
			//根据状态值设置显示的文字
			//在JSX中不能直接使用if()else{}，使用三目运算符
			var text=this.state.isCheck?"已选中":"未选中";
			return(
				<div>
				<input type="checkbox" onChange={this.handleChange} />
				{text}
				</div>
			)
		}
}	)
	ReactDOM.render(
		<CheckButton />,
		document.getElementById("container")
	)

当state发生变化时，组件也会调用组件内部的render方法

定义个组件，当用户输入的时候，实时显示出来：

var InputText=React.createClass({
		getInitialState(){
			return{
				value:"请输入"
			};
		},
		toChange(event){
			//通过event.target.value读取用户输入的值
			this.setState({
				value: event.target.value
			});
		},
		render(){
			var value=this.state.value;
			return(
				<div>
					<input type="text" value={value} onChange={this.toChange}/>
					<p>{value}</p>
				</div>
			)
		}
	})
	ReactDOM.render(
		<InputText />,
		document.getElementById("container")
	)

五，生命周期

  1，三个状态：
    mounting：组件挂载，已插入真实DOM
    updating：组件更新，正在被重新渲染
    unmountong：组件移除，已移出真是DOM


   2，四个阶段

    创建、实例化、更新、销毁

六，生命周期相关方法

1，挂载相关方法：
      （1）componentWillMount
      组件即将要挂载。
      在render之前执行，但仅执行一次，即使多次重复渲染该组件，或者改变了组件的state
      （2）componentDidMount
      组件已经挂载。在render之后执行，同一个组件重复渲染只执行一次

2，更新相关方法
      （1）componentWillReceiveProps(object nextProps)
      已加载组件受到新的props之前调用，注意组件初始化渲染时则不会执行
      （2）shouldComponentUpdate(object nextProps,object nextState)
      组件判断是否重新渲染时调用，该接口实际时在组件接收到了新的props或者新的state的时候会立即调用，然后通过
      （3）componentWillUpdate(obkect nextProps,object nextState)
      组件将要更新
      （4）componentDidUpdate(object prevPorps,object prevState)
      组件已经更新

3，组件移除相关方法。
      componentWillUnmount
      在组件要被移除之前的时间点触发。可以利用该方法来执行一些必要的清理组件将要移除

4，生命周期中与props和state相关：
      （1）getDefaultProps 设置props属性默认值
      （2）getInitialState 设置state属性初始值

5，生命周期各阶段 介绍

var Demo=React.createClass({
    /*一，创建阶段
    流程：
      只调用getDefaultProps方法
    */
    getDefaultProps(){
      console.log("getDefaultProps");
      return {};
    },
    /*
      二，实例化阶段
      流程：
        getInitialState
        componentWillMount
        render
        componentDidMount
    */
    getInitialState(){
      console.log("getInitialState");
      return {};
    },
    componentWillMount(){
      console.log("componentWillMount");
    },
    render(){
      // 用来渲染并返回一个虚拟DOM
      console.log("render:用来渲染并返回一个虚拟DOM");
      return <div>生命周期</div>;
    },
    componentDidMount(){
      /*
      在render之后调用
      在该方法中，react会使用render方法返回的虚拟DOM对象创建真实的DOM结构
      可以在这个方法中读取DOM节点
      */
      console.log("componentDidMount");
    },
    /*
      三，更新流程
        流程：
        componentWillReceiveProps
        shouldComponentUpdate 如果返回值时false，那么后面三个方法不执行
        componentWillUpdate
        render
        componentDidUpdate
    */
    componentWillReceiveProps(){
      console.log("componentWillReceiveProps");
    },
    shouldComponentUpdate(){
      console.log("shouldComponentUpdate");
      return true
    },
    componentWillUpdate(){
      console.log("componentWillUpdate");
    },
    componentDidUpdate(){
      console.log("componentDidUpdate");
    },
    /*
      四，销毁阶段
      流程：
        componentWillUnmount
    */
    componentWillUnmount(){
      console.log("componentWillUnmount");

    }
  })

  //第一次创建并加载组件
  ReactDOM.render(
    <Demo />,
    document.getElementById("container")
  );

  //重新渲染组件
  ReactDOM.render(
    <Demo />,
    document.getElementById("container")
  )

  //移除组件
ReactDOM.unmountComponentAtNode(document.getElementById("container"));