react简介
react是由Fecebook开发的UI库，它的核心思想开发reactJS的组件可以重复调用，易于维护；每个组件有独立的状态，在状态发生改变时UI重新渲染。目前Fecebook开发的UI库有两种：开发web app的UI库reactJS和移动端开发UI库的react native。
利用codepen 学习react
codepen是一个在线前端编辑器，可以在线调试显示demo。codepen由三部分组成html,css,js，根据demo的需求将html,css,js的内容输入对应编辑框中，可在页面显示demo。
图片.png
react是通过babel编译成js代码，codepen提供两个在线的编译库：
图片.png
有关更多codepen的功能可以登录codepen网址：https://codepen.io/pen学习 。
reactJS的hello word
所有的demo都在codepen中实现，首先看一个hello word的实例：
html代码：
<div id='root'></div>
js代码:
var helloWord= <h1>Hello Word!</h1>;
ReactDOM.render(
helloWord,
document.getElementById('root')
);
图片.png
ReactDOM.render函数通过getElementById获取节点，将html元素输出该节点上。
JSX
react使用JSX标签渲染组件，JSX标签是js与html的混搭。最终JSX会被编译成js。在codepen的js编辑器中输入JSX事例如下：
function Welcome(){
return <h1>Hello Word!</h1>;
};
ReactDOM.render(
<Welcome />,
document.getElementById('root')
);
JSX标签名称首字母必须是大写。标签可以添加属性,js代码，重复调用。
function Welcome(props){
return <h1>Hello , {props.name}</h1>
};
function App(){
return (
<div>
<Welcome name='LiMing'/>
<Welcome name='WangYi' />
<Welcome name='LiSi' />
</div>
)
};
ReactDOM.render(
<App/>,
document.getElementById('root')
);
图片.png
虚拟DOM
react有一个重要的概念：虚拟DOM，虚拟DOM主要是解决提高元素的渲染速度。虚拟DOM本质是将xml标签树结构保存在内存中，在组件状态发生改变后，通过diff算法快速对旧树和新树对比定位发生改变的组件节点，patch方法在内存中重新渲染该节点，最后输出到真实的DOM上。
图片.png
reactJS组件
reactJs组件主要由状态，事件，生命周期，元素渲染组成。下面逐个详细分析。
组件创建
es6语法创建组件，继承React的Component。
class Welcome extends React.Component{
render(){
return <h1>Hello Word!</h1>
}
}
ReactDOM.render(
<Welcome />,
document.getElementById('root')
);
props && propTypes
props
props是一个对象，在组件中要获取外部传递的数据，函数等，通过props获取。props在组件内部不能修改，是只读属性。
const user={
name:'LiMing',
age:'23'
}
function App(props){
return (
<div>
<h1>Hello,{props.name}</h1>
<p>age:{props.age}</p>
</div>
)
}
ReactDOM.render(
<App {...user}/>,
document.getElementById('root')
);
图片.png
propTypes
props的属性可以是字符串，对象，数字，函数等等。在使用propTypes定义属性类型，并且验证属性类型是否正确。
import PropTypes from 'prop-types';
class App extends React.Component {
render() {
return (
<div>
<h1>Hello,{this.props.name}</h1>
</div>
);
}
}
App.propTypes = {
name: PropTypes.string
};
ReactDOM.render(
<App name='LiMing'/>,
document.getElementById('root')
);
⚠️需要引入prop-types库。codepen的在线库没有，所以在codepen中无法在线使用。
state
react的组件可以独立重复调用，state存储组件内部能够改变组件状态的对象。
class App extends React.Component{
constructor(props){
super(props);
this.state={
name:''
}
}
handleChange(e){
this.setState({name:e.target.value});
}
handleClick(e){
alert(this.state.name);
e.prevDefault();
}
render(){
return (
<div>
<input type='text' value={this.state.name} onChange={(e)=>this.handleChange(e)} />
<input type='button' value='ok' onClick={(e)=>this.handleClick(e)} />
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
在输入框中输入内容时，onChange函数调用this.setState修改name的值。点击ok按钮，提示框显示文本框内容。prevDefault跳出当前函数，与js中的return false作用相同。
渲染
1）在react组件内部使用render渲染当前组件。
class App extends React.Component{
render(){
return(
<div>
<h1>Hello,{this.props.name}</h1>
<h2>Welcome here!</h2>
</div>
)
}
}
ReactDOM.render(
<App name='LiMing' />,
document.getElementById('root')
);
react组件只有一个根节点。一般return后面用“(”和“)”将渲染内容包起来，这样避免标签后面加“;”，编译后冲突。
2） 条件渲染
在react组件中，可以使用js的if或者条件判断当前状态的渲染内容。
function App(props)
{
if(props.isLogged){
return <h1>Welcome!</h1>;
}
return <h1>Please sign up!</h1>;
}
ReactDOM.render(
<App isLogged={false}/>,
document.getElementById("root")
);
在react组件，将当前状态的渲染元素赋值给变量，在渲染时直接输出元素变量。元素变量的值不会被更改。
function Sign(){
return <h1>Please sign up!</h1>;
}
function Logined(){
return <h1>Welcome!</h1>;
}
class App extends React.Component {
render(){
const isLogined = this.props.isLogined;
let element;
if(isLogined){
element = <Logined />
}else{
element = <Sign />
}
return (
<div>
{element}
</div>
)
}
}
ReactDOM.render(
<App isLogined={true} />,
document.getElementById("root")
);
用let声明元素变量，react组件绝大部分变量都是不变即只读变量，所以基本用const声明。
三目函数
function App(props)
{
const isLogged= props.isLogged;
return isLogged?<h1>Welcome!</h1>:<h1>Please sign up!</h1>;
}
ReactDOM.render(
<App isLogged={false}/>,
document.getElementById("root")
);
与运算和表达式：
function App(props)
{
const name= props.name;
return (
<div>
<h1>Welcome!</h1>
{name.length>0 &&
<h2>Hello,{name}</h2>
}
</div>
)
}
ReactDOM.render(
<App name='LiMing'/>,
document.getElementById("root")
);
true && expression 运算结果返回expression,false && expression运算结果返回false。
事件
在构造器中初始化属性绑定this，如果this没有绑定，不会调onClick事件，函数则无效。
class App extends React.Component{
constructor(props){
super(props);
this.state={isShow:true};
this.showHandle = this.showHandle.bind(this);
this.hindHandle = this.hindHandle.bind(this);
}
showHandle(){
this.setState({isShow:true})
}
hindHandle(){
this.setState({isShow:false})
}
render(){
const isShow = this.state.isShow;
return(
<div>
<h1>Please active button!</h1>
{isShow?
<input type='button' value='hind' onClick={this.hindHandle} />
:
<input type='button' value='show' onClick={this.showHandle} />
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
事件名称使用驼峰命名法；在事件属性初始化绑定this时，如果是多个参数this是显式，其他参数是隐式传递。
使用箭头函数绑定如下：
class App extends React.Component{
constructor(props){
super(props);
this.state={isShow:true};
}
showHandle(){
this.setState({isShow:true})
}
hindHandle(){
this.setState({isShow:false})
}
render(){
const isShow = this.state.isShow;
return(
<div>
<h1>Please active button!</h1>
{isShow?
<input type='button' value='hind' onClick={()=>this.hindHandle()} />
:
<input type='button' value='show' onClick={()=>this.showHandle()} />
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
使用箭头函数是显式的传递参数(e)=>this.showHandle(e),e是事件对象，有多个参数时e在最后。
生命周期
react组件自顶向下瀑布流加载或者单向数据加载，在加载过程不同状态调用不同函数。react内部提供了挂载和卸载两种勾子，如下：
class Clock extends React.Component{
constructor(props){
super(props);
this.state={date:new Date()}
}
componentDidMount(){
this.timer = setInterval(()=>this.tick(),1000);
}
componentWillUnmount(){
clearInterval(this.timer);
}
tick(){
this.setState({
date:new Date()
})
}
render(){
return(
<div>
<h1>It is clock!</h1>
<p>{this.state.date.toLocaleTimeString()}</p>
</div>
)
}
}
ReactDOM.render(
<Clock />,
document.getElementById('root')
);
react组件三种状态：已插入真实Dom种，正在渲染，已移除真实DOM，5种处理函数，will是进入状态前调用函数，did是进入状态后调用函数：
componentWillMount:在组件挂载前调用一次。
componentDidMount:在组件挂载后调用一次。
componentWillUpdate :组件接受新的props或state更新都会调用，在初始化时不调用。
componentDidUpdate:在组件render后，state更新会调用，在初始化时不调用。
componentWillUnmount:在组件卸载时调用一次。
还有2种特殊函数：
componentRecevieProps(prveProps)：已经加载组件接受新的参数时调用，prveProps父组件在调用render时候，调子组件传递的参数。
showComponentUpdate：判断组件是否重新渲染调用，返回true，调用componentWillUpdate。
图片.png
refs
react组件通过虚拟Dom操作，那么需要操作真实Dom怎么办呢？react提供了ref属性，通过ref属性接受回调函数。
class App extends React.Component{
constructor(props){
super(props);
this.handleOk=this.handleOk.bind(this);
}
handleOk(){
alert(this.textInput.value);
}
render(){
return(
<div>
<input type='text' ref={input=>this.textInput=input} />
<input type='button' value='ok' onClick={this.handleOk} />
</div>
)
}
}
ReactDOM.render(
<App/>,
document.getElementById('root')
);
refs主要用于定位焦点，文本框选择，与第三方库集成等。
网友评论