初识React Native虚拟DOM节点及API

Reative Native是著名设社交网络公司Facebook旗下的一款旨在实现虚拟Virtual交互到Native交互层高效交互的View层框架，通过虚拟DOM UI来转为Native UI，通过JSX实现Javascript,IOS,Android原生开发语言的交互，充当一种桥梁(Bridge)的角色，类似一种交叉编译。

虽然不能跨平台应用，但能在各平台上实现各自的代码，但统一的风格，高效的开发受到众多跨平台。

学习网站：

React Native 官方文档中文版

React Native

React Native Github地址

ReactJs官网

示例代码

先来看看最简单的代码

<!DOCTYPEhtml><html>
<head>
<Metacharset="UTF-8"/>
<title>HelloReact!</title>
<!------------start:开发中必须使用的3个js库--------------->
<scriptsrc="../build/react.js"></script>
<scriptsrc="../build/react-dom.js"></script>
<scriptsrc="../build/browser.min.js"></script>
<!------------end:开发中必须使用的3个js库--------------->
</head>
<body>
<divid="example"></div>
 
<!--使用特定的scripttype-->
<scripttype="text/babel">
//首先定义一个UI组建类
varHello=React.createClass({
render:function(){
//css样式使用驼峰写法,如className
return<divclassName="commentBox">Hello{this.props.name}{this.props.myAge}</div>;
}
});
<!--渲染虚拟节点，并且将虚拟节点添加到指定div，注意，这里没有标准属性，一切属性属于自定义-->
ReactDOM.render(
<Helloname="World"myAge="20"/>,document.getElementById('container')
);
</script>
</body>
</html>

当然，我们也可以使得代码和UI分离

html

<!DOCTYPEhtml>
<html>
<head>
<Metacharset="UTF-8">
<title>Document</title>
<scriptsrc="../build/react.js"></script>
<scriptsrc="../build/react-dom.js"></script>
<scriptsrc="../build/browser.min.js"></script>
<scriptsrc="../build/jquery.min.js"></script>
<!--loadappjsx到页面，注意，默认情况下不会load，除非改html放到服务器下-->
<scripttype="text/babel"src=js/app.js>
</script>
</head>
<body>
<divid="example">
</div>
</body>
</html>

app.js---注意，旧版本是app.jsx

classRepoListextendsReact.Component{
//<!--启用构造函数，传入参数-->
constructor(props){
super(props);
this.state={
loading:true,error:null,data:null
}
}
//<!--当jsx渲染完成后执行-->
componentDidMount()
{
this.props.promise.then(
value=>this.setState({loading:false,data:value}),error=>this.setState({loading:false,error:error}));
}
//<!--当jsx渲染完成后执行-->
render(){
if(this.state.loading){
return<span>Loading...</span>;
}
elseif(this.state.error!==null){
return<span>Error:{this.state.error.message}</span>;
}
else{
varrepos=this.state.data.items;
varrepoList=repos.map(function(repo){
return(
<li><ahref={repo.html_url}>{repo.name}</a>({repo.stargazers_count}stars)<br/>{repo.description}</li>
);
});
return(
<main>
<h1>MostPopularJavaScriptProjectsinGithub</h1>
<ol>{repoList}</ol>
</main>
);
}
}
}
//获取js输入，并赋值给promise,注意数据结构是promise={{....}}
ReactDOM.render(
<RepoListpromise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')}/>,document.body
);

初识React Native虚拟DOM节点及API

猜你在找的React相关文章