webpack + react基础

1. 在render函数中使用js表达式

• 在render函数中第一个参数中（要渲染的虚拟DOM）可以使用{}的方式插入任意的合法的js表达式，但是要注意只能有一个根元素

2. 使用构造函数创建组件（无状态组件，无state和生命周期函数）

• 使用构造函数创建组件，如果要接收参数，使用参数列表的props来接收（注意：组件必须向外return一个合法的jsx创建的虚拟DOM，props是只读的，类似vue的props）

function Hello (props) { // 组件名称必须首字母大写
  return <div>这是组件hello---{props.name}</div>
}
ReactDOM.render(<div>
<Hello name="zhangsan"></Hello>
</div>, "一个页面上的DOM")

3. 单文件组件

• 直接新建一个jsx文件，在文件中编写组件相关的代码，并且以es6的语法export default将组件暴露出去，在需要用到这个组件的地方用import引入组件即可
• 在引入组件时，后缀名可以省略，但是需要在webpack配置文件（webpack.config.js）中添加一个配置节点，

resolve{
  extensions: ['.js', '.jsx', '.json']
}

在进行这一项的配置后，如果在写文件路径时没有写后缀名，系统会找这个配置节点数组里的项补全后缀名并找到相应的文件。

3. 使用class关键字创建组件（有状态组件，有私有数据state和生命周期）

• es6中class关键字，是实现面向对象编程的新形式
  class基本语法

class '组件名称' extends React.component {
  render () { // 必须要有render 函数，并且返回一个合法的 jsx 虚拟 DOM
    return <div>jsx虚拟DOM</div>
  }
}

• 在class关键字创建的组件中使用外界传递的属性，只需要 this.props.属性即可（this指向当前实例对象）

4. 组件中使用样式文件

• 行内样式

// 直接在jsx的虚拟dom结构中添加代码
const styleObj = { fontSize: '15px' }
ReactDOM.render(
  <div>{styleObj}</div>
)

• 利用css-loader将样式文件模块化
  启用css-modules
• 启用bootstrap第三方样式库而不去将它模块化（模块化使用太繁琐），自己定义的样式文件为.scss文件或者是.less文件，为它们配置模块化；而bootstrap等第三方样式类库的样式文件为.css结尾，不为其配置模块化
  启用bootstrap

5. React中绑定事件

• 事件的名称都是由React提供的，因此事件名的首字母必须大写（onClick）
• 事件绑定

// 接收一个函数表达式
<button onClick={ function () {console.log('ok')} }></button>
// 将函数定义在类的实例方法中，但是这样难以传参
<button onClick={ this.clickHandler }></button>
// 标准用法 箭头函数的 this 指向当前环境下的 this 指向
<button onClick={ () =>{ this.clickHandler('参数') } }></button>

6. 修改state 中的数据
   this.setState({ 数据：数据 }, () => {回调函数}) 这是一个异步执行的方法

7. 生命周期

   
   生命周期

8. 数据双向绑定

• 在vue数据的双向绑定提供一个 v-model指令，其实它的是指就是将data中的数据绑定给表单的value属性，然后在表单的input事件中修改data值。
• 在react中，思路类似，将state绑定到value中，然后在react提供的onChange事件中去调用setState来修改值。这里我们获取最新的表单输入值的方式有两种：1. 根据react的·组合事件参数e中的e.target来得到时间源的DOM对象引用然后获取value，获取在 jsx 对应绑定事件的表单元素中加一个 ref 引入方便获取这个表单的 DOM 对象引用。