React Native 语法细节相关

1.箭头函数调用的两种实现：

======方法1==========
//这种调用调的是箭头函数的对象
onFocus = {this._commentsTextGetFocus}


//箭头函数
  _commentsTextGetFocus = () => {
    if (this.state.commentsText.length > 0) {
      this.setState({ isShowCommentsCancelBtn: true });
    } else {
      this.setState({ isShowCommentsCancelBtn: false });
    }
  }


=======方法2===========
//直接是箭头函数的调用，把方法包在箭头函数里了
  onFocus={() => {
    this._commentsTextGetFocus();
   }}

//方法实现
  _commentsTextGetFocus() {
    if (this.state.commentsText.length > 0) {
      this.setState({ isShowCommentsCancelBtn: true });
    } else {
      this.setState({ isShowCommentsCancelBtn: false });
    }

第二种，传递匿名函数会导致每一次的props都不相同，让组件出现无谓的渲染，Q友说的。

2.如果未指定父组件的宽度，那么子组件利用marginHorizontal 是显示不出来的，只能是marginLeft和width，

如果父组件指定了width，子组件利用marginHorizontal就可以显示出来。

3. ""的.length 是0,是0，是0，是0，是0，是0，是0，！！！空字符串"" 或'' bool也是false

空数组([]) 和空对象({})对应的布尔值，都是true。

4.这两个的区别：

//方法1
alignContent: "center",

//方法2
justifyContent: "center",
alignItems: "center"

alignContent的布局效果和alignIems完全一致，只不过前者只对多行的item才有效果，而后者对单行、多行都有效

参考：https://blog.csdn.net/qq_28978893/article/details/78855709

这个帖子有待继续探究：http://www.imooc.com/wenda/detail/431382

5.string 和number 相互转换

//paramesters.orderAt 是string 类型
//string 转number
  paramesters.orderAt + 0 > 0   

//this.priceExport 是number 类型
//munber 转string
 this.priceExport + ""

number 转换为字符串保留两位小数：

//======price 是number====== 

//方法1 利用正则化
 let processedPrice = price.toString();
 processedPrice = processedPrice.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3");

//方法2  方法也比较简单
 processedPrice = processedPrice.toFixed(2);

参考博客：http://www.cnblogs.com/fozero/p/6959896.html 对number转string 几种方法进行了分析。

6.这两个属性需要了解一下

//clearTextOnFocus={true}
//autoFocus={true}

7. ...fontStyles.frogFontFamilyStyle 这种写法是什么写法？

… 操作符（也被叫做延展操作符－ spread operator）已经被 ES6 数组支持。它允许传递数组或者类数组直接做为函数的参数而不用通过apply。 延展操作符一般用于属性的批量赋值上。

  priceNumberTextStyle: {
    flex: 1,
    marginLeft: 3,
    marginRight: 1,
    marginTop: 2,
    color: "#333333",
    fontSize: 21,
    textAlign: "left",
    height: 32,
    backgroundColor: "#F5F5F5",
    borderRadius: 6,
    paddingTop: 0,
    paddingBottom: 0,
    paddingLeft: 0,
    ...fontStyles.frogFontFamilyStyle
  },

8.箭头函数和代码块的区别？？

https://blog.csdn.net/danfengw/article/details/80840060

这两个需要慢慢体会！！！！

http://bbs.reactnative.cn/topic/2480/bind和箭头函数-哪个更好呢

http://www.imooc.com/wenda/detail/431382

9.项目中用到的正则表达式尽可能搞懂！！

10. "" 和''的区别是啥？

HTML/JSX 属性使用双引号 "；

JS 使用单引号 '；

// bad
<Foo bar='bar' />
// good
<Foo bar="bar" />
// bad
<Foo style={{ left: "20px" }} />
// good
<Foo style={{ left: '20px' }} />
// JavaScript Expression
const person = <Person name={window.isLoggedIn ? window.name : ''} />;
// HTML/JSX
const myDivElement = <div className="foo" />;
const app = <Nav color="blue" />;
const content = (
  <Container>
    {window.isLoggedIn ? <Nav /> : <Login />}
  </Container>
);

11.代码优化

if (
        this.state.amountTextNum === "0.00" ||
        this.state.amountTextNum === "0.0" ||
        this.state.amountTextNum === "0" ||
        this.state.amountTextNum === "0."
      ) {
        UserInterface.showFlashInfo("输入数字要大于0哦!");
      } 

//用下面方法代替
      let exportAmount = parseFloat(this.state.amountTextNum);
      if (exportAmount === 0) {
        UserInterface.showFlashInfo("输入数字要大于0哦!");
      }

React Native 语法细节相关

猜你喜欢