React Native之React速学教程(上)
React Native是基于React的,在开发React Native过程中少不了的需要用到React方面的知识。虽然官方也有相应的Document,但篇幅比较多,学起来比较枯燥。 通过《React Native之React速学教程》你可以对React有更系统和更深入的认识。为了方便大家学习,我将《React Native之React速学教程》分为上、中、下三篇,大家可以根据需要进行阅读学习。 概述本篇为《React Native之React速学教程》的第一篇。本篇将从React的特点、如何使用React、JSX语法、组件(Component)以及组件的属性,状态等方面进行讲解。 What’s ReactReact是一个用于组建用户界面的JavaScript库,让你以更简单的方式来创建交互式用户界面。
不是模板却比模板更加灵活:
Get Started 使用React之前需要在页面引入如下js库 。 上面一共列举了三个库: react.js 、react-dom.js 和 browser.min.js ,它们必须首先加载。其中,react.js 是 React 的核心库,react-dom.js 是提供与 DOM 相关的功能,browser.min.js 的作用是将 JSX 语法转为 JavaScript 语法,这一步很消耗时间,实际上线的时候,应该将它放到服务器完成。
使用React解压从上述地址下载的压缩包,在根目录中创建一个包含以下内容的 “helloworld.html” 。 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="build/react.js"></script>
"build/react-dom.js""https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>, document.getElementById('example')
);
</script>
</body>
</html>
在 JavaScript 代码里写着 XML 格式的代码称为 JSX,下文会介绍。为了把 JSX 转成标准的 JavaScript,我们用 ReactDOM.render()ReactDOM.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点。 ```html ReactDOM.render( Hello,world!,document.getElementById(‘example’) ); ``` JSX JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。 每一个XML标签都会被JSX转换工具转换成纯JavaScript代码,使用JSX,组件的结构和组件之间的关系看上去更加清晰。 Usage: React.render(//使用JSX
<div>
<div>
<div>content</div>
</div>
</div>,document.getElementById('example')
);
React.render(//不使用JSX
React.createElement('div',null,React.createElement('div','content')
)
),document.getElementById('example')
);
HTML标签 与 React组件 对比 React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。 var myDivElement = className="foo" />;
React.render(myDivElement,document.body);
要渲染 React 组件,只需创建一个大写字母开头的本地变量。 var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
React.render(myElement,document.body);
JavaScript 表达式属性表达式要使用 JavaScript 表达式作为属性值,只需把这个表达式用一对大括号 ({}) 包起来,不要用引号 (“”)。 // 输入 (JSX):
var person = <Person name={window.isLoggedIn ? window.name : ''} />;
// 输出 (JS):
var person = React.createElement(
Person,{name: window.isLoggedIn ? window.name : ''}
);
#### 子节点表达式 同样地,JavaScript 表达式可用于描述子结点: // 输入 (JSX):
var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
// 输出 (JS):
var content = React.createElement(
Container,window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
);
注释JSX 里添加注释很容易;它们只是 JS 表达式而已。你只需要在一个标签的子节点内(非最外层)用 {} 包围要注释的部分。 class ReactDemo extends Component {
render() {
return (
<View style={styles.container}>
{/*标签子节点的注释*/}
<Text {styles.welcome}
//textAlign='right'
textShadowColor='yellow'
/*color='red'
textShadowRadius='1'*/ >
React Native!
</Text>
</View>
);
}
}
JSX延展属性不要试图去修改组件的属性不推荐做法: var component = <Component />;
component.props.foo = x; // 不推荐
component.props.bar = y; // 不推荐
这样修改组件的属性,会导致React不会对组件的属性类型(propTypes)进行的检查。从而引发一些预料之外的问题。 推荐做法: <Component foo={x} bar={y} />;
延展属性(Spread Attributes)你可以使用 JSX 的新特性 - 延展属性: var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;
传入对象的属性会被复制到组件内。 它能被多次使用,也可以和其它属性一起用。注意顺序很重要,后面的会覆盖掉前面的。 var props = { foo: 'default' };
var component = } {'override'} />;
console.log(component.props.foo); // 'override'
上文出现的… 标记被叫做延展操作符(spread operator)已经被 ES6 数组 支持。 ComponentReact 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件。 var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage "John" />,document.getElementById('example')
);
上面代码中,变量 HelloMessage 就是一个组件类。模板插入
组件的属性(props) 我们可以通过 遍历对象的属性: array React.Children.map(object children,function fn [,object thisArg])
该方法会返回一个array。 React.Children.forEach(object children,sans-serif; font-size:14px; line-height:20px"> Usage:
var NotesList = React.createClass({
render: function() {
return (
<ol>
{
React.Children.map(this.props.children,function (child) {
return <li>{child}</li>;
})
}
</ol>
);
}
});
ReactDOM.render(
<NotesList>
<span>hello</span>
<span>world</span>
</NotesList>,document.body
);
PropTypes 组件的属性可以接受任意值,字符串、对象、函数等等都可以。有时,我们需要一种机制,验证别人使用组件时,提供的参数是否符合要求。 var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,},render: function() {
return <h1> {this.props.title} </h1>;
}
});
上面的Mytitle组件有一个title属性。PropTypes 告诉 React,这个 title 属性是必须的,而且它的值必须是字符串。现在,我们设置 title 属性的值是一个数值。 var data = 123;
ReactDOM.render(
<MyTitle title={data} 这样一来,title属性就通不过验证了。控制台会显示一行错误信息。
Warning: Failed propType: Invalid prop `title` of type `number` supplied to `MyTitle`,expected `string`. 更多的PropTypes设置,可以查看官方文档。 var MyTitle = React.createClass({
getDefaultProps : function () {
return {
title : 'Hello World'
};
},128)"></h1>;
}
});
ReactDOM.render(
<MyTitle 上面代码会输出 "Hello World" 。
ref 属性(获取真实的DOM节点)组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM)。只有当它插入文档以后,才会变成真实的 DOM 。根据 React 的设计,所有的 DOM 变动,都先在虚拟 DOM 上发生,然后再将实际发生变动的部分,反映在真实 DOM上,这种算法叫做 DOM diff ,它可以极大提高网页的性能表现。 但是,有时需要从组件获取真实 DOM 的节点,这时就要用到 ref 属性。 var MyComponent = React.createClass({
handleClick: function() {
this.refs.myTextInput.focus();
},render: function() {
return (
<input "text" ref="myTextInput" />
"button" value="Focus the text input" onClick={this.handleClick} />
</div>
);
}
});
ReactDOM.render(
<MyComponent 上面代码中,组件 MyComponent 的子节点有一个文本输入框,用于获取用户的输入。这时就必须获取真实的 DOM 节点,虚拟 DOM 是拿不到用户输入的。为了做到这一点,文本输入框必须有一个 ref 属性,然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。
需要注意的是,由于 this.refs.[refName] 属性获取的是真实 DOM ,所以必须等到虚拟 DOM 插入文档以后,才能使用这个属性,否则会报错。上面代码中,通过为组件指定 Click 事件的回调函数,确保了只有等到真实 DOM 发生 Click 事件之后,才会读取 this.refs.[refName] 属性。 React 组件支持很多事件,除了 Click 事件以外,还有 KeyDown 、Copy、Scroll 等,完整的事件清单请查看官方文档。
state 上文讲到了props,因为每个组件只会根据props 渲染了自己一次,props 是不可变的。为了实现交互,可以使用组件的 state 。this.state 是组件私有的,可以通过 初始化state 通过 更新 statethis.setState()方法来更新state,调用该方法后,React会重新渲染相关的UI。 var FavoriteButton=React.createClass({ getInitialState:function(){ return {favorite:false}; },handleClick:function(event){ this.setState({favorite:!this.state.favorite}); },render:function(){ var text=this.state.favorite? 'favorite':'un favorite'; return ( 'button' {this.handleClick}> You {text} this. Click to toggle. </div> ); } }); 上面代码是一个 FavoriteButton 组件,它的 getInitialState 方法用于定义初始状态,也就是一个对象,这个对象可以通过 this.state 属性读取。当用户点击组件,导致状态变化,this.setState 方法就修改状态值,每次修改以后,自动调用 this.render 方法,再次渲染组件。
参考 React’s official site (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |