React及React Native开发入门学习笔记

最新推荐文章于 2024-09-12 12:18:02 发布

feiyu_may

最新推荐文章于 2024-09-12 12:18:02 发布

阅读量531

点赞数

分类专栏：其他文章标签： react react native

本文链接：https://blog.csdn.net/feiyu_may/article/details/96867807

版权

其他专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1. React

React Native是基于React的语法特性进行开发的，上手RN之前需要学习React的语法特性。

1.1 创建React工程

使用脚手架创建工程：create-react-app projectName。

脚手架创建的工程默认是封装配置项的，如果我们要进行一些自定义配置，需要执行npm run eject暴露配置项。

以禁止工程运行后默认打开浏览器为例，暴露配置项后，在script/start.js中，注释掉与openBrowser相关的两行（30、130），就可以实现了。

如果执行npm run eject的时候报错“Remove untracked files, stash or commit any changes, and try again.”，是因为.gitignore文件的存在，但是我们又没有建立本地仓库，所以先在项目文件夹下建立git仓库，并提交项目，再执行npm run eject就不会报错。

cd yourFolder

git init

git add .

git commit -m 'Saving before ejecting'

npm run eject

注意，暴露配置项操作不可逆

1.2 学习资料

React的学习，主要看官方文档的基础部分，然后看一些优秀的博客

官网：react官网

优质文章：React入门看这篇就够了

1.3 主要语法特性

1.3.1 虚拟DOM

虚拟DOM由js实现，HTML写在js里，通过diff算法实现视图的高效更新。用一个对象来描述DOM，render执行的结果得到的JavaScript对象就是虚拟DOM，它在DOM的基础上建立了一个抽象层，对数据和状态所做的任何改动，都会被自动且高效的同步到虚拟DOM，最后再批量同步到DOM中。

虚拟DOM diff算法的几个步骤：

（1）用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中

（2）当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异

（3）把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了。

虚拟DOM只把变化的部分重新渲染，提高渲染的效率。原生DOM发生更改时需要遍历，但是大部分DOM内容没有改变，全部遍历渲染效率低。

1.3.2 JSX及组件

React中，使用JSX语法创建组件。

JSX语法示例：const element = <h1>Hello, world!</h1>

JSX是一种 JavaScript 的语法扩展。推荐在 React 中使用 JSX 来描述用户界面。JSX 是在 JavaScript 内部实现的，用来声明React当中的元素。

可以在 JSX 中使用 JavaScript 表达式，表达式写在花括号 {} 中。在 JSX 中不能使用 if else 语句，但可以使用三元运算表达式来替代。

如果在 JSX 中给元素添加类, 需要使用 className 代替 class，label 的 for属性，使用htmlFor代替。

创建组件的三种方式：

（1）函数式定义的无状态组件

function HelloComponent(props) {

return <div>Hello {props.name}</div>

}

ReactDOM.render(<HelloComponent name="Sebastian" />, mountNode)

（2）es5原生方式React.createClass定义的组件，逐渐不使用

var InputControlES5 = React.createClass({....}）

ReactDOM.render......

（3）es6形式的extends React.Component定义的组件，推荐

class Clock extends React.Component {

render() {

return (

<div>

)}}

组件创建，类名首字母大写

必须有返回值，返回值可以是：JSX对象或null

1.3.3 state及props

React中是单向数据流，自上而下，由父组件传递到子组件。

数据更新原理，setState()方法，要将React元素渲染到根DOM节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上，React 元素都是不可变的。当元素被创建之后，是无法改变其内容或属性的。目前更新界面的唯一办法是创建一个新的元素，然后将它传入 ReactDOM.render() 方法。

不要在render方法中调用 setState() 方法，否则会递归渲染，因为状态改变会重新调用render()，render()又重新改变状态。

1.3.4 事件

React 事件绑定属性的命名采用驼峰式写法

激活按钮

</button>

  constructor(props) {

    super(props);

    this.state = {

      data: [],

      loaded: false

    }

    this.lightBt = this.lightBt.bind(this);

  }

事件需要在constructor中绑定this

this.handleClick = this.handleClick.bind(this);

构造方法constructor( )其实就是构造函数本身，super()实现继承，子类是没有自己的 this 对象的，它只能继承自父类的 this 对象，然后对其进行加工，而super( )就是将父类中的this对象继承给子类的。没有 super，子类就得不到 this 对象。

1.3.5 生命周期

组件的生命周期分成三个状态：

Mounting：已插入真实 DOM

Updating：正在被重新渲染

Unmounting：已移出真实 DOM

React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

componentWillMount()：组件挂载到页面之前调用，在render()之前，无法获取页面中的DOM对象，可以调用setState()方法，用来发送ajax请求

componentDidMount()：组件已经挂载到页面，可以进行DOM操作，可以发送ajax请求，可以调用setState()方法，但是修改状态会重新渲染。

componentWillUpdate(object nextProps, object nextState)

componentDidUpdate(object prevProps, object prevState)

componentWillUnmount()：清除定时器

此外，React 还提供两种特殊状态的处理函数。

componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用

shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调

2. React Native

2.1创建、运行工程

创建工程：react-native init myapp

安装模块包：npm install

配置好开发环境：windows下只能开发安卓应用，请自行安装好Androi Studio等调试环境，或请原生开发人员协助配置

运行：打开Android Studio的模拟器或者连接手机，命令行运行： react-native run-android（有时候需要先运行react-native start）

2.2 调试

代码修改后更新视图：

（1）命令行重新react-native run-android

（2）模拟器，ctrl+m选择reload

（3）安卓模拟器，连续按两下R

（4）模拟器，开启自动刷新，ctrl+m选择Enable Live Reload，某些情况不能改动（增加新的资源，更改原生代码）

（5）模拟器，开启热更新，ctrl+m选择Enable Hot Reloading

（6）真机调试，可以通过晃动手机调出菜单项，等同于模拟器ctrl+m

调试

（1）用chrome浏览器调试，模拟器，ctrl+m选择Debug JS Remotely，会自动打开浏览器窗口，不是显示用户界面，只提供console输出，以及断点调试，无法看网络请求。React的工具React Developer Tools对RN是没有用的

（2）react-native-debugger调试工具，可以检测网络请求，和chrome调试一样，选择Debug JS Remotely，需要关闭浏览器中的debug页面

推荐方式：开启hot reloading，用react-native-debugger调试

Live Reload 刷新整个窗口，状态会丢失，Hot Reloading局部刷新，只刷新更改的部分，更高效。

3. RN与React

（1）React和React Native的原理是相同的，都是由js实现的虚拟dom来驱动界面view层渲染。只不过ReactJs是驱动html dom渲染； React Native是驱动android/ios原生组件渲染。底层 renders 层不同，React 使用的是虚拟DOM，React Native 替换成了native 组件。react 直接渲染dom，而rn生成id，用bridge（最新用c++实现）变成一个表，等待 native 去调用。RN调用Objective-C 的API 去渲染iOS 组件，调用Java API 去渲染Android 组件

（2）rn继承了react的优点，声明式、组件化、基于状态等

（3）flex布局有些特性不同，参考：Flex布局在RN端与Web端规则对比

react-native-thirdparty：https://github.com/Geek-ch/react-native-thirdparty

很全的RN第三方库总结：https://github.com/Geek-ch/react-native-thirdparty