리액트 네이티브를 어떻게 배우나요? React Native의 학습 경로에 대한 자세한 설명
- 寻∝梦원래의
- 2018-09-11 14:38:103342검색
React Native는 React을 기반으로 합니다. React Native를 개발하는 과정에서 React에 대한 지식은 필수입니다. 공식적으로 해당 문서가 있긴 하지만 꽤 길고 배우기가 지루합니다. "React Native: React Quick Learning Tutorial"을 통해 React에 대해 보다 체계적이고 심도있게 이해할 수 있습니다. , 누구나 필요에 따라 읽고 공부할 수 있습니다.
Overview
이 글은 "React Native Quick Learning Tutorial"의 첫 번째 글입니다. 이번 글에서는 React의 특징, React 사용법, JSX 문법, 컴포넌트, 컴포넌트의 속성과 상태에 대해 설명하겠습니다.
React란 무엇인가
React는 사용자 인터페이스 구축을 위한 JavaScript 라이브러리로, 보다 간단한 방법으로 대화형 사용자 인터페이스를 생성할 수 있습니다.
데이터가 변경되면 React는 업데이트가 필요한 구성 요소를 효율적으로 업데이트하고 렌더링합니다. 선언적 뷰를 사용하면 코드를 더 쉽게 예측하고 디버깅할 수 있습니다.
자체 상태를 캡슐화하고 관리하는 구성 요소를 만든 다음 이를 복잡한 사용자 인터페이스로 조립합니다. 구성 요소 로직은 템플릿이 아닌 JavaScript로 작성되므로 애플리케이션을 통해 풍부한 데이터를 쉽게 전달하고 DOM 상태를 유지할 수 있습니다.
한번 배우면 어디서나 글을 쓸 수 있습니다. React를 배우면 웹 개발뿐만 아니라 React Native를 사용하여 Android 및 iOS 애플리케이션을 개발할 수도 있습니다. .
은 템플릿이 아니지만 템플릿보다 더 유연합니다.
#🎜🎜 #경험: 위 사진은 GitHub Popular 홈페이지의 스크린샷입니다. 이 페이지는 다양한 구성 요소로 구성되어 있습니다. 구성 요소 기반 개발 모델을 사용하면 코드를 더 많이 재사용할 수 있으며 구성 요소 간의 구성 요소 조립이 매우 유연합니다. .시작하기React를 사용하기 전에 페이지에 다음 js 라이브러리를 도입해야 합니다.
- react.js
- react-dom.js#🎜 🎜# browser.min.js
- 위에는 총 3개의 라이브러리(react.js, React-dom.js 및 browser.min)가 나열되어 있습니다. Node.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>
<script src="build/react-dom.js"></script>
<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
</head>
<body>
<p id="example"></p>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>, document.getElementById('example')
);
</script>
</body></html>XML 형식을 JavaScript 코드로 작성하는 코드를 JSX라고 하는데, 아래에서 소개하겠습니다. JSX를 표준 JavaScript로 변환하기 위해
태그를 사용한 후 Babel을 사용하여 실제로 브라우저에서 실행되는 컨텐츠로 변환합니다.<script type="text/babel"></script>ReactDOM.render()
ReactDOM.render는 React의 가장 기본적인 방법으로 템플릿을 HTML 언어로 변환하고 지정된 DOM 노드를 삽입하는 데 사용됩니다.
ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') );
上述代码的作用是将<h1>Hello, world!</h1>插入到元素id为example的容器中。
JSX
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。 每一个XML标签都会被JSX转换工具转换成纯JavaScript代码，使用JSX，组件的结构和组件之间的关系看上去更加清晰。
JSX并不是React必须使用的，但React官方建议我们使用 JSX , 因为它能定义简洁且我们熟知的包含属性的树状结构语法。
Usage:
React.render(//使用JSX <p>
<p>
<p>content</p>
</p>
</p>,
document.getElementById('example')
);
React.render(//不使用JSX
React.createElement('p', null,
React.createElement('p', null,
React.createElement('p', null, 'content')
)
),
document.getElementById('example')
);HTML标签 与 React组件 对比
React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。
要渲染 HTML 标签，只需在 JSX 里使用小写字母开头的标签名。
var mypElement = <p className="foo" />; React.render(mypElement, document.body);
要渲染 React 组件，只需创建一个大写字母开头的本地变量。
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
React.render(myElement, document.body);提示：
React 的 JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签。
由于 JSX 就是 JavaScript，一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代， React DOM 使用 className 和 htmlFor 来做对应的属性。
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,
null,
window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
);注释
JSX 里添加注释很容易；它们只是 JS 表达式而已。你只需要在一个标签的子节点内(非最外层)用 {} 包围要注释的部分。
class ReactDemo extends Component {
render() {
return (
<View style={styles.container}>
{/*标签子节点的注释*/} <Text style={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）进行的检查。从而引发一些预料之外的问题。
推荐做法：
var component = <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 = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'上文出现的… 标记被叫做延展操作符（spread operator）已经被 ES6 数组 支持。
Component
React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render( <HelloMessage name="John" />,
document.getElementById('example')
);上面代码中，变量 HelloMessage 就是一个组件类。模板插入 <hellomessage></hellomessage> 时，会自动生成
HelloMessage 的一个实例。所有组件类都必须有自己的 render 方法，用于输出组件。
注意
组件类的第一个字母必须大写。
组件类只能包含一个顶层标签。
组件的属性(props)
我们可以通过this.props.xx的形式获取组件对象的属性，对象的属性可以任意定义，但要避免与JavaScript关键字冲突。
遍历对象的属性：
this.props.children会返回组件对象的所有属性。
React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用React.Children.map或React.Children.forEach 来遍历子节点。
React.Children.map
array React.Children.map(object children, function fn [, object thisArg])
该方法会返回一个array。
React.Children.forEach
React.Children.forEach(object children, function fn [, object thisArg])
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
组件的属性可以接受任意值，字符串、对象、函数等等都可以。有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。
组件类的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} />,
document.body
);这样一来，title属性就通不过验证了。控制台会显示一行错误信息。
Warning: Failed propType: Invalid prop `title` of type `number` supplied
to `MyTitle`, expected `string`.
更多的PropTypes设置，可以查看官方文档。
此外，getDefaultProps 方法可以用来设置组件属性的默认值。
var MyTitle = React.createClass({
getDefaultProps : function () {
return {
title : 'Hello World'
};
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});
ReactDOM.render( <MyTitle />,
document.body
);上面代码会输出"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 ( <p>
<input type="text" ref="myTextInput" />
<input type="button" value="Focus the text input" onClick={this.handleClick} />
</p>
);
}
});
ReactDOM.render( <MyComponent />,
document.getElementById('example')
);上面代码中，组件 MyComponent 的子节点有一个文本输入框，用于获取用户的输入。这时就必须获取真实的 DOM 节点，虚拟 DOM 是拿不到用户输入的。为了做到这一点，文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。
需要注意的是，由于 this.refs.[refName] 属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。上面代码中，通过为组件指定 Click 事件的回调函数，确保了只有等到真实 DOM 发生 Click 事件之后，才会读取 this.refs.[refName] 属性。
React 组件支持很多事件，除了 Click 事件以外，还有 KeyDown 、Copy、Scroll 等，完整的事件清单请查看官方文档。（想看更多就到PHP中文网React参考手册栏目中学习）
心得：ref属性在开发中使用频率很高，使用它你可以获取到任何你想要获取的组件的对象，有个这个对象你就可以灵活地做很多事情，比如：读写对象的变量，甚至调用对象的函数。
state
上文讲到了props，因为每个组件只会根据props 渲染了自己一次，props 是不可变的。为了实现交互，可以使用组件的 state 。this.state 是组件私有的，可以通过getInitialState()方法初始化，通过调用 this.setState() 来改变它。当
state 更新之后，组件就会重新渲染自己。
render() 方法依赖于 this.props 和 this.state ，框架会确保渲染出来的 UI 界面总是与输入（ this.props 和 this.state ）保持一致。
初始化state
通过getInitialState() 方法初始化state，在组件的生命周期中仅执行一次，用于设置组件的初始化 state
。
getInitialState:function(){
return {favorite:false};
}更新 state
通过this.setState()方法来更新state，调用该方法后，React会重新渲染相关的UI。this.setState({favorite:!this.state.favorite});
Usage:
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 ( <p type='button' onClick={this.handleClick}>
You {text} this. Click to toggle. </p>
);
}
});上面代码是一个 FavoriteButton 组件，它的 getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。
경험: this.props와 this.state 모두 컴포넌트의 특성을 설명하는 데 사용되므로 혼동이 발생할 수 있습니다. 구별하는 간단한 방법은 this.props가 일단 정의되면 절대 변경되지 않는 속성을 나타내는 반면, this.state는 사용자 상호 작용에 따라 변경되는 속성이라는 것입니다.
이 기사는 여기에서 끝납니다. (자세한 내용을 보려면 PHP 중국어 웹사이트React 사용자 매뉴얼 칼럼을 방문하세요.) 궁금한 점이 있으면 아래에 메시지를 남겨주세요.
위 내용은 리액트 네이티브를 어떻게 배우나요? React Native의 학습 경로에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!