React中需要注意的地方(一)

本文翻译自官方文档TIPS部分,因为个人水平限制,欢迎指正。

本文主旨:本文可以使用React解决一部分你可能遇到的问题,提醒你注意一些常见的误区。

一、行内样式

    在React中,style行内样式不再是一个简单的字符串。它是一个{}的对象,这个对象里边的key是样式名称的驼峰命名显示,而value则是你想要的样式值(通常是字符串)。

    看下边例子:

var divStyle = {
  color: 'white',
  backgroundImage: 'url(' + imgUrl + ')',
  WebkitTransition: 'all', // note the capital 'W' here
  msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};

React.render(<div style={divStyle}>Hello World!</div>, mountNode);
    样式名称采用驼峰命名法,是为了与JS访问DOM节点是坚持的原则保持一致。除了特定的前缀,除了ms,其它都应该以大写开头,这就是上边例子中 WebkitTransition首字母大写的原因。(我们常用的那些基础的css还是小写开头),当然如果不想单独写样式也可以采用{{}},来表示样式:

React.render(<div style={{color:"red"}}>Hello World!</div>, mountNode);

   这里还有些需要注意的地方,React在访问像素为单位的属性是,它会自动加上“px”。所以有些地方我们可以省略后缀px:

var divStyle = {height: 10}; // rendered as "height:10px"
React.render(<div style={divStyle}>Hello World!</div>, mountNode);
    有时候你想让你的css保持没有单位,  那么就需要注意以下不会自动添加后缀“px”的情况:

  • columnCount
  • fillOpacity
  • flex
  • flexGrow
  • flexShrink
  • fontWeight
  • lineClamp
  • lineHeight
  • opacity
  • order
  • orphans
  • strokeOpacity
  • widows
  • zIndex
  • zoom

二、JSX语法中的if/else

    JSX语法是不支持if/esle的。这是因为JSX只是函数调用和对象构造的语法糖。看下边例子:

// This JSX:
React.render(<div id="msg">Hello World!</div>, mountNode);

// Is transformed to this JS:
React.render(React.createElement("div", {id:"msg"}, "Hello World!"), mountNode);
    这意味着 if 语句是不能嵌入的。接着往下看:

// This JSX:
<div id={if (condition) { 'msg' }}>Hello World!</div>

// Is transformed to this JS:
React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!");
    例子汇总从JSX转换为JS以后,明显可以看出已经不是有效的JS,这是应该使用一个三元的表达式来替代:

React.render(<div id={condition ? 'msg' : ''}>Hello World!</div>, mountNode);

    如果你使用三元表达式感觉自己的代码不够健壮,你可以在非JSX语法外,使用if来决定用哪个JSX语法块。

var loginButton;
if (loggedIn) {
  loginButton = <LogoutButton />;
} else {
  loginButton = <LoginButton />;
}

return (
  <nav>
    <Home />
    {loginButton}
  </nav>
)

三、自关闭标签

    在JSX中,<MyComponent />可以使用,但是<MyComponent>就不行了。所有的标签都要有结束标志 / 。
    同时:在JSX中所有的标签都可以自关闭(所有标签都可写成空标签),如<div />.和<div></div>等价的。

四、JSX的根节点的最大数量

    目前,在一个组件的render方法中,你只能返回一个节点。如果你必须返回多个div,那么你仍然需要用一个div或者span等其他容器来包容这些div。

    不要忘了JSX要转换成JS。假设返回两个JSX的div,相当于返回两个js函数,就没有语法意义。同样的道理,在三元表达式中,也不要使用多于一个的子表达式。

五、children属性的类型

    通常地,一个组件的children属性(this.props.children)是一组容器的数组。

var GenericWrapper = React.createClass({
  componentDidMount: function() {
    console.log(Array.isArray(this.props.children)); // => true
  },

  render: function() {
    return <div />;
  }
});

React.render(
  <GenericWrapper><span/><span/><span/></GenericWrapper>,
  mountNode
);

    但是,当该组件中只有一个子标签的时候,this.props.children仅仅指代这个子标签本身,而不是一个数组。这可以省略类型转换。

var GenericWrapper = React.createClass({
  componentDidMount: function() {
    console.log(Array.isArray(this.props.children)); // => false

    // warning: yields 5 for length of the string 'hello', not 1 for the
    // length of the non-existant array wrapper!
    console.log(this.props.children.length);
  },

  render: function() {
    return <div />;
  }
});

React.render(<GenericWrapper>hello</GenericWrapper>, mountNode);

六、输入框初始值的问题

    为了控制用户不能输入我们可以指定value属性的值。当然你也有可能遇到一个输入框需要指定初始值的问题。但是当render渲染到页面之后,你会发现这个输入框变得不可编辑了,这种情况下,我们需要将value的值设为null或undefine。

下边的例子就展示了这种现象,等到1秒以后,输入框变得可编辑了。

React.render(<input value="hi" />, mountNode);

setTimeout(function() {
  React.render(<input value={null} />, mountNode);
}, 1000);
 

七、渲染之后不会触发componentWillReceiveProps

  componentWillReceiveProps 在dom渲染之后是不会被触发的。这是因为当初设计的原因。你可以查找其他符合你要求的生命周期方法。

    原因是componentWillReceiveProps经常处理的是旧的(已存在的)属性更改的逻辑,而不是去在旧属性不存在的情况下去触发,也不是去帮助定义什么方法。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值