React Native 琐碎知识点(持续更新......)

React Native 琐碎知识点(持续更新......)_第1张图片

React Native

1.自定义属性中,必须选其中一种 shape: PropTypes.oneOf(['round', 'square']).isRequired

2.自定义属性中,要么指定具体数字,要么用full width: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['full'])]).isRequired

3.之前判断根据不同平台写 Style 时用 height: Platform.OS === 'ios' ? 200 : 100, 今天发现还有另一种写法 ,
...Platform.select({
ios: { top : 20 },
android : { top : 10 } }
),

marginTop:Platform.select({android:2, ios:0})

4.componentWillReceiveProps(nextProps) 在组件接收新的props时触发, 用法: if (nextProps.project !== this.props.project) { }

5.避免用户调整字体(大小)影响APP界面布局 Text.defaultProps.allowFontScaling=false 在程序启动页面加入这句

6.用命令行打包 react-native bundle --assets-dest /Users/kenny/temp/ --bundle-output /Users/kenny/temp/main.jsbundle --dev false --entry-file index.ios.js --platform ios, 路径地址请根据自己的环境修改

7.react-native init MyProject --version 0.39.2 React Native 初始化时指定版本

8.react-native run-android --variant Huaweidebug 运行调试程序的指定渠道包 10.react-native run-ios --device "Kennys iPhone" 运行调试程序到真机上(指定机器名)

9.使用 PureComponent 代替 Component 来简单优化子组件性能

10.setState 使用函数式: this.setState(prevState => ({ count: prevState.count + 1 }))

11。在列表的 item 上设置一个 key,这个 key 必须是唯一,最后不要用 index(用数据库里的 ID), 因为你如果删除一条记录,index 就都变了。

12.事件绑定

推荐使用:

在构造函数里 this.handleChange = this.handleChange.bind(this);
在类里 handleChange = () => { };
不推荐使用:

属性里 onChange={this.handleChange.bind(this)}
属性里 onChange={e => this.handleChange(e)}
原因:不推荐的两种方式,会在每次执行 render 方法时重新分配资源

node和npm

安装或更新 npm npm install -g -d npm@latest
查看 npm 版本信息用 npm version,内容要比npm -v 全面
npm update 命令对指定的 Package 进行升级,例如npm update redux
npm outdated 查询当前安装的所有 npm 包中是否有存在新版本, Wanted 列是当前项目支持的最高版本
npm install --save redux --save 的意思是安装的同时, 把模块和版本号添加到 dependencies 里
npm install --save-dev eslint --save-dev,将模块和版本号添加到 devDependencies,仅供开发期间使用
npm uninstall --save redux 删除 node_modules 包的同时,也从 dependencies 里清除模块和版本信息
npm shrinkwrap 允许用户锁定整个依赖树,让每个包使用特定的版本
exportFun.fun2(response); exportFun'fun3'; 在 Node 里支持字符串参数形式调用 exports 函数写法
yarn 与 npm 相比的优势在:1.本地缓存文件;2.并行化处理,安装更快;3.使用文件锁,保证跨终端的文件结构一致;4.安装包更安全
node --inspect index.js,使用 Chrome 开发者工具调试 Node.js
在 WebStorm + nodemon 调试,需配置为:/usr/local/bin/nodemon --exec /usr/local/bin/node

ES6

1.事件 bind 放在constructor里更高效(bindings once, use forevermore), 避免使用 Arrow function。如:
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() { console.log('clicked!'); }
render(){
return(
Click Me
)
}

2.在 JavaScript 里 null、undefined、0、-0、NaN 和 "" 都为 false

你可能感兴趣的:(React Native 琐碎知识点(持续更新......))