- 在
render函数中使用js表达式
- 在
render函数中第一个参数中（要渲染的虚拟DOM）可以使用{}的方式插入任意的合法的js表达式，但是要注意只能有一个根元素
- 使用构造函数创建组件（无状态组件，无
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")
- 单文件组件
- 直接新建一个jsx文件，在文件中编写组件相关的代码，并且以es6的语法
export default将组件暴露出去，在需要用到这个组件的地方用import引入组件即可 - 在引入组件时，后缀名可以省略，但是需要在webpack配置文件（
webpack.config.js）中添加一个配置节点，
resolve{
extensions: ['.js', '.jsx', '.json']
}
在进行这一项的配置后，如果在写文件路径时没有写后缀名，系统会找这个配置节点数组里的项补全后缀名并找到相应的文件。
- 使用
class关键字创建组件（有状态组件，有私有数据state和生命周期）
-
es6中class关键字，是实现面向对象编程的新形式
class基本语法
class '组件名称' extends React.component {
render () { // 必须要有render 函数，并且返回一个合法的 jsx 虚拟 DOM
return <div>jsx虚拟DOM</div>
}
}
- 在
class关键字创建的组件中使用外界传递的属性，只需要this.props.属性即可（this指向当前实例对象）
- 组件中使用样式文件
- 行内样式
// 直接在jsx的虚拟dom结构中添加代码
const styleObj = { fontSize: '15px' }
ReactDOM.render(
<div>{styleObj}</div>
)
- 利用
css-loader将样式文件模块化
启用css-modules
- 启用
bootstrap第三方样式库而不去将它模块化（模块化使用太繁琐），自己定义的样式文件为.scss文件或者是.less文件，为它们配置模块化；而bootstrap等第三方样式类库的样式文件为.css结尾，不为其配置模块化
启用bootstrap
- React中绑定事件
- 事件的名称都是由React提供的，因此事件名的首字母必须大写（onClick）
- 事件绑定
// 接收一个函数表达式
<button onClick={ function () {console.log('ok')} }></button>
// 将函数定义在类的实例方法中，但是这样难以传参
<button onClick={ this.clickHandler }></button>
// 标准用法 箭头函数的 this 指向当前环境下的 this 指向
<button onClick={ () =>{ this.clickHandler('参数') } }></button>
-
修改state 中的数据
this.setState({ 数据：数据 }, () => {回调函数})这是一个异步执行的方法 -
生命周期
生命周期
-
数据双向绑定
- 在vue数据的双向绑定提供一个
v-model指令，其实它的是指就是将data中的数据绑定给表单的value属性，然后在表单的input事件中修改data值。 - 在react中，思路类似，将
state绑定到value中，然后在react提供的onChange事件中去调用setState来修改值。这里我们获取最新的表单输入值的方式有两种：1. 根据react的·组合事件参数e中的e.target来得到时间源的DOM对象引用然后获取value，获取在jsx对应绑定事件的表单元素中加一个ref引入方便获取这个表单的 DOM 对象引用。
网友评论