2018.12.10杂七杂八

• 利用&&运算符来简化那些本来需要用if的运算再好不过了，因为&&表示前面的为true时后面才能执行。比如我们可以写成下面这样

'value' in nextProps && this.setState({value:nextProps.value})
//表示当属性中有value项时才能设置state中的value值

this.props.onChange && this.props.onChange(value)
//表示当有onChange属性时才能调用onChange函数

• this.props对象的属性与组件的属性一一对应 ,但是有一个例外，就是this.props.children属性，它代表组件的所有子节点 我们可以通过let {children}=this.props或者this.props.children来获取该组件的所有子组件，但是要注意的是this.props.children的值有三种可能：如果当前组件没有子节点，它就是undefined；如果有一个子节点，数据类型是object；如果有多个子节点，数据类型就是array。

• 目前用到的React.Chidren的地方就是把父组件的属性传给所有子组件时要用到这个属性，例如我们在实现RadioGroup的时候需要对每个Radio子组件添加属性

  //子组件
  function RadioOption(props) {
  return (
  <label>
  <input type="radio" value={props.value} name={props.name} />
  {props.label}
  </label>
  )
  }
  
  
  function renderChildren(props) {//遍历所有子组件
  return React.Children.map(props.children, child => {
  if (child.type === RadioOption)
  return React.cloneElement(child, {
  //克隆每一个对象，并且把父组件的props.name赋值给每个子组件
  name: props.name
  })
  else
  return child
  })
  }
  
  
  //父组件
  function RadioGroup(props) {
  return (
  <div>
  {renderChildren(props)}
  </div>
  )
  }
      
      
     function App() {
  return (
  <RadioGroup name="hello">
  <RadioOption label="选项一" value="1" />
  <RadioOption label="选项二" value="2" />
  <RadioOption label="选项三" value="3" />
  </RadioGroup>
  )
  }
      
  export default App
  

• 在ES6中，模板字符串(template string)是增强版的字符串，用反单引号表示

  // 普通字符串
  `In JavaScript '\n' is a line-feed.`
  
  // 多行字符串
  `In JavaScript this is
   not legal.`
  
  console.log(`string text line 1
  string text line 2`);
  
  // 字符串中嵌入变量
  let name = "Bob", time = "today";
  `Hello ${name}, how are you ${time}?`
  

  上面代码中的模板字符串，都是用反引号表示。如果在模板字符串中需要使用反引号 ,则前面要用反斜杠转义

  let greeting = `\`Yo\` World!`;
  

• in运算符要注意的是第二个运算数为对象和数组时，计算的方式是不一样的，特别对于数组的情况要格外注意，因为它是检测索引

1、如果第二个运算数为对象，则in运算符用来检测第一个运算数是否是第二个运算数的属性名。是，返回true，否则返回false。

   var obj = {x:1,y:2};
  “x” in obj     // 返回true
  “y” in obj     // 返回true
  “1” in obj     // 返回false

2、如果第二个运算数为数组，则in运算符用来检测第一个运算数是否为数组包含的索引之一。

   var arr = [12,45,78];
  12 in arr       // 返回false
  45 in arr       // 返回false
  78 in arr       // 返回false
  0 in arr         // 返回true
  2 in arr         // 返回true

• ES6中的可计算属性名可以在文字的形式中使用[]包裹一个表达式作为属性名

  var suffix = ' name';
  var person = { 
      ['first' + suffix]: 'Nicholas',
      ['last' + suffix]: 'Zakas'
  }
   
  person['first name']; // "Nicholas"
  person['last name']; // "Zakas"
  

• React.cloneElement用来为组件添加属性

  React.cloneElement(
    element,
    [props],
    [...children]
  )
  

  第一个参数必须是存在的React组件或者原生DOM，但我们通常发现用的最多的搭配是React.Children.map和this.props.children使用

  React.Children.map(this.props.children,child=>{
      React.cloneElement(child,{...props},children)
  })
  

  第二个参数是配置当前element的props

  // 我们的意图是希望每个child组件都继承父组件props
  React.Children.map(this.props.children,child=>{
      React.cloneElement(child,this.props)
  })
  

  但上面的写法一旦遇到嵌套组件，则会触发maximum call stack size is exceeded，因为 this.props包含了children属性，因此将一直迭代执行.

  下面这么写能安全的继承父组件props

  const {children,...otherPorps}=this.porps
  React.Children.map(children,child=>{
      React.cloneElement(child,otherPorps)
  })
  

  当然，props参数还可以自行配置新的属性，最终都能分别传递给每一个子组件

   第三个参数用来配置当前element的children，用的较少，和第二个参数一样，这里也不能使用this.props.children，否则也将进入死循环。