1. React中创建组件

第1种 - 创建组件的方式

使用构造函数来创建组件，如果要接收外界传递的数据，需要在 构造函数的参数列表中使用props来接收；

必须要向外return一个合法的JSX创建的虚拟DOM；

function Hello () {    // return null    return <div>Hello 组件</div>}

// 使用组件并 为组件传递 props 数据<Hello name={dog.name} age={dog.age} gender={dog.gender}></Hello>// 在构造函数中，使用 props 形参，接收外界 传递过来的数据function Hello(props) {  // props.name = 'zs'  console.log(props)  // 结论：不论是 Vue 还是 React，组件中的 props 永远都是只读的；不能被重新赋值；  return <div>这是 Hello 组件 --- {props.name} --- {props.age} --- {props.gender}</div>}

// 打开 webpack.config.js ，并在导出的配置对象中，新增 如下节点：resolve: {    extensions: ['.js', '.jsx', '.json'], // 表示，这几个文件的后缀名，可以省略不写    alias: {        '@': path.join(__dirname, './src')    }  }

第2种 - 创建组件的方式

使用 class 关键字来创建组件

ES6 中 class 关键字，是实现面向对象编程的新形式；

了解ES6中 class 关键字的使用

基于class关键字创建组件

// 如果要使用 class 定义组件，必须 让自己的组件，继承自 React.Componentclass 组件名称 extends React.Component {    // 在 组件内部，必须有 render 函数,作用：渲染当前组件对应的 虚拟DOM结构    render(){        // render 函数中，必须 返回合法的 JSX 虚拟DOM结构        return <div>这是 class 创建的组件</div>    }}

2. 两种创建组件方式的对比

注意：使用 class 关键字创建的组件，有自己的私有数据（this.state） 和 生命周期函数；

注意：使用 function 创建的组件，只有props，没有自己的私有数据和 生命周期函数；

• 如果一个组件需要有自己的私有数据，则推荐使用：class创建的有状态组件；
• 如果一个组件不需要有私有的数据，则推荐使用：无状态组件；
• React官方说：无状态组件，由于没有自己的state和生命周期函数，所以运行效率会比 有状态组件稍微高一些；

  有状态组件和无状态组件之间的本质区别就是：有无state属性、和 有无生命周期函数；

• props 中的数据都是外界传递过来的；
• state/data 中的数据，都是组件私有的；（通过 Ajax 获取回来的数据，一般都是私有数据）；
• props 中的数据都是只读的；不能重新赋值；

CommentList: [ { id: 1, user: '张三', content: '哈哈，沙发' }, { id: 2, user: '李四', content: '哈哈，板凳' }, { id: 3, user: '王五', content: '哈哈，凉席' }, { id: 4, user: '赵六', content: '哈哈，砖头' }, { id: 5, user: '田七', content: '哈哈，楼下山炮' }]

4. 设置样式

<h1 style={ {color: 'red', fontWeight: 200} }></h1>

1. 修改 webpack.config.js这个配置文件，为 css-loader 添加参数：

   { test: /\.css$/, use: ['style-loader', 'css-loader?modules'] } // 为 .css 后缀名的样式表  启用 CSS 模块化

2. 在需要的组件中，import导入样式表，并接收模块化的 CSS 样式对象：

   import cssObj from '../css/CmtList.css'

3. 在需要的HTML标签上，使用className指定模块化的样式：

   <h1 className={cssObj.title}>评论列表组件</h1>

• [path] 表示样式表 相对于项目根目录 所在路径
• [name] 表示 样式表文件名称
• [local] 表示样式的类名定义名称
• [hash:length] 表示32位的hash值
• 例子：{ test: /\.css$/, use: ['style-loader', 'css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]'] }

• :local()包裹的类名，是被模块化的类名，只能通过className={cssObj.类名}来使用
  同时，:local默认可以不写，这样，默认在样式表中定义的类名，都是被模块化的类名；
• :global()包裹的类名，是全局生效的，不会被 css-modules 控制，定义的类名是什么，就是使用定义的类名className="类名"

在项目中启用模块化并同时使用bootstrap

{ test: /\.scss$/, use: ['style-loader', 'css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]', 'sass-loader'] } // 打包处理 scss 文件的 loader

5. React 中绑定事件的注意点

onClick= { function }

<button onClick={ () => this.show('传参') }>按钮</button>// 事件的处理函数，需要定义为 一个箭头函数，然后赋值给 函数名称show = (arg1) => {    console.log('show方法' + arg1)}

6. 绑定文本框与state中的值（单向数据流）

<input type="text" style={{ width: '100%' }} value={this.state.msg} onChange={() => this.textChanged()} ref="mytxt" /> // 响应 文本框 内容改变的处理函数  textChanged = () => {    // console.log(this);    // console.log(this.refs.mytxt.value);    this.setState({      msg: this.refs.mytxt.value    })  }

7. 使用ref获取DOM元素引用

8. 组件的生命周期

• 组件创建阶段：特点：一辈子只执行一次

  componentWillMount:
  render：
  componentDidMount:

• 组件运行阶段：按需，根据 props 属性 或 state 状态的改变，有选择性的 执行 0 到多次

  componentWillReceiveProps:
  shouldComponentUpdate:
  componentWillUpdate:
  render:
  componentDidUpdate:

• 组件销毁阶段：一辈子只执行一次

  defaultProps

• constructor()
• componentWillMount()
• render()
• componentDidMount()

• componentWillReceiveProps(nextProps)
• shouldComponentUpdate(nextProps, nextState)
• componentWillUpdate(nextProps, nextState)
• render()
• componentDidUpdate(prevProps, prevState)

• componentWillUnmount()

  9. 通过Counter计数器的小案例 - 了解生命周期函数

  // 为组件提供 默认的 props 属性值  static defaultProps = {    initcount: 0 // 默认值为0    如果用户没有传递 ，则 默认就是0； 如果用户传递了，则 以用户传递的为准  }

  // 3. 进行 props 属性的类型校验,   static propTypes = {}  是固定写法  static propTypes = {    initcount: PropTypes.number.isRequired // 规定 外界在传递 initcount 的时候，必须是 number 值类型，否则 ，会在终端报警告    // isRequired 表示 这个 props 属性值 是必须要传递的  }

10. 使用React中的事件，绑定count自增

11. 发表评论案例

相关文章