[toc]
前言
React-Native = React + iOS/Android， 所以如果是APP开发工程师，本质上需要补充的是React框架层的知识。
其实React是Facebook 2014年开源的一个重量级前端框架，与Angular和Vue并称为前端开发三驾马车。
前端开发技术栈：Angular/Vue/React 三选一以及全家桶 、 webpack编译打包、ES6或TypeScript、Node.js ......
本文主要讲述前端开发技术栈的React栈，为react-native服务。
RN开发工程师绕不过的坎 React。
参考文献： React中文文档
参考文献：阮一峰React技术栈
安装
-
这里使用React开发新项目
创建一个React项目并且运行
$ npm install -g create-react-app $ create-react-app my-react-app $ cd my-react-app $ npm start # 浏览器打开 localhost:3000 即可看到运行的页面 -
文件目录结构
|-- package.json |-- package-lock.json |-- public |-- src |-- index.js |-- index.css |-- node-modules public 目录下有index.html文件，在index.js文件获取root根节点： ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') );
React 框架学习笔记
-
JSX渲染
React采用jsx渲染，并且允许嵌套、if语句。
Babel编译器会把JSX转化成名为React.createElement()的方法
React只会更新必要部分节点。因此它更加高效。
-
组件和Props & state & 生命周期
定义组件：
class UserInfo extends React.Component { render () { return <div> <Avatar user={this.props.user}></Avatar> <div>{this.props.user.name}</div> </div> } }Props只读性
State 是组件的全局状态管理属性
组件有自身的生命周期
// 处理计时器组件 state、组件生命周期 class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } componentDidMount() { } componentDidMount() { this.timeID = setInterval( () => this.tick(), 1000 ); } componentWillUnmount() { clearInterval(this.timeID); } tick() { this.setState({ date: new Date() }); } render () { return ( <div> <h1>Hello, hhhhhh1！</h1> <h2>It is {this.state.date.toLocaleTimeString()}.</h2> </div> ); } } -
事件处理
事件处理需要注意的是：
定义好的事件必须绑定this，否则在编译阶段就会报错。
// This binding is necessary to make `this` work in the callback this.handleClick = this.handleClick.bind(this); -
条件渲染和列表和Keys
React支持条件渲染、三目运算符和 && 运算符
-
表单
表单案例：
class NameForm extends React.Component { constructor(props) { super(props); this.state = {value: ''}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { this.setState({value: event.target.value}); } handleSubmit(event) { alert('A name was submitted: ' + this.state.value); event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <label> Name: <input type="text" value={this.state.value} onChange={this.handleChange}/> </label> <input type="submit" value="Submit"/> </form> ) } } -
高级
使用PropTypes检查类型
class Greeting extends React.Component { constructor(props) { super(props); this.myRef = React.createRef(); } render() { return( <div ref={this.myRef}> <h1>Hello, {this.props.name}</h1> </div> ); } } Greeting.propTypes = { name: PropTypes.Number }Refs和Dom
Refs较为常用，可以尝试深入React Refs和Dom中文参考文档
-
高级
React 技术栈之路由：react-router
参考文献：react-router文档
-
安装react-router
$ npm install --save react-router -
导入router
import { Router, Route, Link } from 'react-router'; import { browserHistory } from 'react-router'; <!--这里创建一个页面about--> import About from './about'; class App extends React.Component { constructor(props) { super(props); } render() { return ( <div> <h1>React-router Demo</h1> <ul> <li> <Link to="/">首页</Link> </li> <li> <Link to="/about">关于我们</Link> </li> </div> ) } } // 不加 history 会报错 ReactDOM.render(<Router history={browserHistory}> <Route path="/" component={App}> </Route> <Route path="about" component={About}></Route> </Router>, document.getElementById('app') )这样就能够使用Router路由。集成路由还是相当简单的。
-
over
React 技术栈之打包：webpack
参考文献：webpack搭建项目案例库webpack-demos
-
webpack
需要集成webpack、webpack-dev-server、webpack-cli三个组件库
$ npm install --save webpack webpack-dev-server webpack-cli -
webpack.config.js文件
这是webpack的配置文件，按照所需配置相关项
module.exports = { entry: './src/index.js', output: { filename: './bundle/bundle.js' }, module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /\.jsx?$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['es2015', 'react'] } } }, ] } }; -
更新package.json scripts
将package.json中的scripts选项更改为dev和webpack编译选项
"dev": "webpack-dev-server --open --history-api-fallback", "build": "webpack", # 执行npm run dev即可编译项目 $ npm run dev -
over
React技术栈之Redux
-
案例
import React, { Component } from 'react'; import { createStore } from 'redux'; // 定义reducer const reducer = (state, action) => { if (typeof state === 'undefined') { return 0; } switch (action.type) { case 'INCREMENT': return state + "中国"; case 'DECREMENT': return state + "法国"; case 'CLEAR_NUM': return "日本"; default: return state; } }; // 定义store，根据reducer，更改state状态 const store = createStore(reducer); // 定义update state，将新state赋值给DOM节点 const update = () => { const valueEl = document.getElementsByClassName('numValue'); valueEl[0].innerHTML = store.getState().toString(); } // store订阅update store.subscribe(update); export default class Number extends React.Component { addNum() { store.dispatch({type: 'INCREMENT'}); } minusNum() { store.dispatch({type: 'DECREMENT'}); } clearNum() { store.dispatch({type: 'CLEAR_NUM'}); } render() { return ( <div className="wrap"> <h3>Origin Redux</h3> Current Number: <span className="numValue">0</span> <div> <button className="numBtn" onClick={this.addNum}>+</button> <button className="numBtn" onClick={this.minusNum}>-</button> <button className="numBtn" onClick={this.clearNum}>clear</button> </div> </div> ); } }Redux技术 是将state拆分为 state、action、dispatcher、store，结合DOM。一般的我们将这几个事件拆分成文件，类似MVVM架构化。
redux flow
React技术栈之Flux
Flux总体技术类似Redux
React技术栈之scss 布局
杂记
typeof 返回值有六种可能： "number," "string," "boolean," "object," "function," 和 "undefined."
对于Array,Null等特殊对象使用typeof一律返回object，这正是typeof的局限性。
网友评论