React 组件
React 组件可以让你把 UI 分割为独立、可复用的片段，并将每一片段视为相互独立的部分。
- 组件是由一个个的 HTML 元素组成的
- 概念上来讲, 组件就像 JS 中的函数。它们接受用户输入（
props），并且返回一个 React 对象，用来描述展示在页面中的内容
React 创建组件的两种方式
- 1 通过 JS 函数 创建（无状态组件）
- 2 通过 class 创建（有状态组件）
函数式组件 和 class 组件的使用场景说明：
1 如果一个组件仅仅是为了展示数据，那么此时就可以使用 函数组件
2 如果一个组件中有一定业务逻辑，需要操作数据，那么就需要使用 class 创建组件，因此，此时需要使用 state
JavaScript 函数创建
- 注意：1 函数名称必须为大写字母开头，React 通过这个特点来判断是不是一个组件
- 注意：2 函数必须有返回值，返回值可以是：JSX 对象或
null - 注意：3 返回的 JSX，必须有一个根元素
- 注意：4 组件的返回值使用
()包裹，避免换行问题
function Welcome(props) {
return (
<div className="shopping-list">
{/* 注释的写法 */}
<h1>Shopping List for {props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
</ul>
</div>
)
}
ReactDOM.render(<Welcome name="jack" />, document.getElementById('app'))
class 创建
- 注意：基于
ES6中的 class，需要配合babel将代码转化为浏览器识别的 ES5 语法 - 安装：
npm i -D babel-preset-env
class ShoppingList extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
</ul>
</div>
)
}
}
给组件传递数据 - 父子组件传递数据
- 组件中有一个
只读的对象叫做props，无法给 props 添加属性 - 获取方式：函数参数
props - 作用：将传递给组件的属性转化为
props对象中的属性
function Welcome(props){
// props ---> { username: 'zs', age: 20 }
return (
<div>
<div>Welcome React</div>
<h3>姓名：{props.username}----年龄是：{props.age}</h3>
</div>
)
}
// 给 Hello组件 传递 props：username 和 age
ReactDOM.reander(<Hello username="zs" age={20}></Hello>, ......)
封装组件到独立的文件中
// ./components/Hello2.js
// 1. 引入React模块
// 由于 JSX 编译后会调用 React.createElement 方法，所以在你的 JSX 代码中必须首先声明 React 变量。
import React from 'react'
// 2. 使用function构造函数创建组件
function Hello2(props) {
return (
<div>
<div>这是Hello2组件</div>
<h1>这是大大的H1标签，我大，我骄傲！！！</h1>
<h6>这是小小的h6标签，我小，我傲娇！！！</h6>
</div>
)
}
// 3. 导出组件
export default Hello2
// app.js
// 使用组件：
import Hello2 from './components/Hello2'
props 和 state
props
- 作用：给组件传递数据，一般用在父子组件之间
- 说明：React 把传递给组件的属性转化为一个对象并交给
props - 特点：
props是只读的，无法给props添加或修改属性 props.children：获取组件的内容，比如：<Hello>组件内容</Hello>中的组件内容
// props 是一个包含数据的对象参数，不要试图修改 props 参数
// 返回值：react元素
function Welcome(props) {
// 返回的 react元素中必须只有一个根元素
return <div>hello, {props.name}</div>
}
class Welcome extends React.Component {
constructor(props) {
super(props)
}
render() {
return <h1>Hello, {this.props.name}</h1>
}
}
state
- 作用：用来给组件提供
组件内部使用的数据 - 注意：只有通过
class创建的组件才具有状态 - 注意：状态是私有的，完全由组件来控制
- 注意：不要在
state中添加render()方法中不需要的数据，会影响渲染性能！- 可以将组件内部使用但是不渲染在视图中的内容，直接添加给 this
- 注意：不要在
render()方法中调用 setState() 方法来修改state的值- 但是可以通过
this.state.name = 'rose'方式设置 state（不推荐!!!!）
- 但是可以通过
class Hello extends React.Component {
constructor() {
this.state = {
gender: 'male'
}
}
render() {
return (
<div>
性别：
{this.state.gender}
</div>
)
}
}
JSX 语法转化过程
// JSX
const element = (
<h1 className="greeting">
Hello, world!
</h1>
)
// JSX -> createElement
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
)
// React elements: 使用对象的形式描述页面结构
// Note: 这是简化后的对象结构
const element = {
tagName: 'h1',
props: {
className: 'greeting',
},
children: ['Hello, world']
}
// HTML
<h1 class="greeting">
Hello, world!
</h1>
评论列表案例
- 巩固有状态组件和无状态组件的使用
- 两个组件：
<CommentList></CommentList>和<Comment></Comment>
[
{ user: '张三', content: '哈哈，沙发' },
{ user: '张三2', content: '哈哈，板凳' },
{ user: '张三3', content: '哈哈，凉席' },
{ user: '张三4', content: '哈哈，砖头' },
{ user: '张三5', content: '哈哈，楼下山炮' }
]
// 属性扩散
<Comment {...item} key={i}></Comment>
style 样式
// 1. 直接写行内样式：
<li style={{border:'1px solid red', fontSize:'12px'}}></li>
// 2. 抽离为对象形式
var styleH3 = {color:'blue'}
var styleObj = {
liStyle:{border:'1px solid red', fontSize:'12px'},
h3Style:{color:'green'}
}
<li style={styleObj.liStyle}>
<h3 style={styleObj.h3Style}>评论内容：{props.content}</h3>
</li>
// 3. 使用样式表定义样式：
import '../css/comment.css'
<p className="pUser">评论人：{props.user}</p>
