一些概念

• 组件：视图的片段、内部管理数据集合（state）外部传入配置结合（props）
• 包含： 1. 视图标记（React的JSX、Vue的template）需要经过转换而成为真实的DOM
• 2. 事件
• 3. 数据
• 4. 逻辑（存储storage、数据结构化处理）
• 5. 外部的配置

属性props和数据/状态state的区别

1. state → 数据池 组件内部的管理数据的容器 组件内部可读写
2. props → 属性池 外部调用组件时传入的属性集合 组件内容只读不可写

组件渲染过程

1. React主动调用Mytitle自定义组件
2. 将属性集合转换对象 props → { title: 'xxx'}
3. 将对象作为props传入组件
4. 替换JSX中的props或者state中的变量
5. ReactDOM将最终的React元素通过一系列操作转换成真实DOM进行渲染

组件调用规范

1. 视图标记：HTML标签 <h1></h1>
2. 大驼峰写法作为一个React元素 <Mytitle />组件 → JSX → React元素
3. 组件转换React元素 React.createElement参考下面代码

使用props（类组件）

class Mytitle extends React.Component {constructor(props) {super(props)}state = {title: this.props.title}changeTitle() {this.setState({title: 'new title'})}render() {return (<div><h1>{this.state.title}</h1><button onClick={this.changeTitle.bind(this)}>修改</button></div>)}
}
ReactDOM.render(<Mytitle title="init title" />,document.getElementById('app')
)

使用hooks（函数组件，不写class了）

• 函数组件一定要是一个纯函数（入参不可修改，能保证绝对的复用性）
• 注意onClick绑定的不是函数执行setTitle('new title')，而应该是一个匿名函数
• 或者用bind返回一个函数

function Mytitle(props) {const [title, setTitle] = React.useState(props.title)return (<div><h1>{title}</h1><button onClick={() => setTitle('new title')}>修改</button>// or// <button onClick={setTitle.bind(this, 'new title')}>修改</button></div>)
}
ReactDOM.render(<Mytitle title="init title" />,document.getElementById('app')
)
// or不写jsx
// ReactDOM.render(
//     React.createElement(Mytitle, {
//         title: 'init title'
//     }),
//     document.getElementById('app')
// )

使用展开运算符

// 省略
state = {title: 'title',author: 'author'
}
render(){return (<Title {...this.state }/>)
}
// 相当于 <Title title="this.state.title" author="this.state.author" />