JS学习--React（一）

转载自：React.js 小书   http://huziketang.mangojuice.top/books/react/

 

JSX

所谓的 JSX 其实就是 JavaScript 对象。每当在 JavaScript 代码中看到这种 JSX 结构的时候，脑子里面就可以自动做转化，这样对你理解 React.js 的组件写法很有好处。

遇到的一个小点：假如user是一个变量，{user}即{user：user的值}

 

render添加元素

一个组件类必须要实现一个 render 方法，这个 render 方法必须要返回一个 JSX 元素。但这里要注意的是，必须要用一个外层的 JSX 元素把所有内容包裹起来。返回并列多个 JSX 元素是不合法的。

render () {
  const className = 'header'
  return (
    <div className={className}>
      <h1>React 小书</h1>
    </div>
  )
}

上述代码为 div 标签添加了一个叫 header 的类名。注意，直接使用 class 在 React.js 的元素上添加类名如 <div class=“xxx”> 这种方式是不合法的。因为 class 是 JavaScript 的关键字，所以 React.js 中定义了一种新的方式：className 来帮助我们给元素添加类名。

还有一个特例就是 for 属性（label标签的属性，规定其与哪个input绑定，值为input的id），例如 <label for='male'>Male</label>，因为 for 也是 JavaScript 的关键字，所以在 JSX 用 htmlFor 替代，即 <label htmlFor='male'>Male</label>。而其他的 HTML 属性例如 style 、data-* 等就可以像普通的 HTML 属性那样直接添加上去。

条件返回JSX

render () {
  const isGoodWord = true
  return (
    <div>
      <h1>
        React 小书
        {isGoodWord
          ? <strong> is good</strong>
          : <strong> is not good</strong>
        }
      </h1>
    </div>
  )
}

根据 isGoodWord 的不同返回不同的 JSX 内容。或者写：null，根据isGoodWord的值来隐藏或者显示信息

组件嵌套使用、组件树

class Title extends Component {
  render () {
    return (
      <h1>React 小书</h1>
    )
  }
}

class Header extends Component {
  render () {
    return (
      <div>
        <Title />
      </div>
    )
  }
}

在组件中嵌套使用其他组件，可以就像使用HTML标签一样使用组件。注意：自定义的组件都必须要用大写字母开头，普通的 HTML 标签都用小写字母开头。

在编写React应用时，基于应用的设计先绘制一个组件树可以帮助我们更好的构建应用，理清楚层级关系

事件监听

通过使用on*调用事件监听函数（使用驼峰命名，*为事件，React已经封装好了的，但是只能用在普通的HTML标签，不能用在自定义的组件标签上）

配置组件的参数

父组件中在使用一个组件的时候，可以把参数放在这个组件的标签的属性当中，所有的属性都会作为 props 对象的键值，进行配置。

• state 是让组件控制自己的状态，props 是让外部对组件进行配置。
• 尽量少地用 state，尽量多地用 props（状态会带来管理的复杂性，可以使用函数式组件（无状态组件））