内容清单:
- 创建组件的方法.
- 组件的props、state属性的特点以及用法
- 父传子(传值)
- 子传父
- 兄弟组件传值
1.React创建组件的方法
1.1组件化的特点(仅做了解即可)
- 标准性
- 组合性
- 重用性
- 可维护性
1.2创建函数(function)组件(重点)
//引用react模块
import React from 'react'
//定义一个React组件
function Example(){
return(
<React.Fragment>
'这是一个函数组件'
</React.Fragment>
)
}
//抛出
export default Example;
1.3创建类(class)组件(重点)
import React from 'react';
//定义一个React组件
class Example extends React.Component{
//渲染到页面
render(){
return (
<React.Fragment>
'这是一个类组件'
</React.Fragment>
);
}
}
//抛出
export default Example;
注意
- 组件名称要求大写字母开头,不得出现中文
- 在返回的值里面必须有且仅有一个盒子在外面包裹着
<React.Fragment></React.Fragment>标签相当于一个空标签没有特殊的含义只是为了不在重复增加盒子,避免出现样式上的问题
1.4函数组件和class组件的区别(了解)
区别 | 函数组件 | class组件 |
---|---|---|
是否有 this | 没有 | 有 |
是否有生命周期 | 没有 | 有 |
是否有状态 state | 没有 | 有 |
注意
- 使用class 关键字创建的组件,有自己的私有数据(this.state)和生命周期函数;
- 使用function创建的组件,只有props,没有自己的私有数据和生命周期函数;
2.React核心属性
1.1props属性(重点)
props属性的作用:组件之间的通信
props属性的特点:(了解)
1.每个组件对象都会有props(properties的简写)属性
2.组件标签的所有属性都保存在props中
3.内部读取某个属性值:this.props.propertyName
4.作用:通过标签属性从组件外 向组件内传递数据(只读 read only)
5.对props中的属性值进行类型限制和必要性限制
代码示例
使用函数(function)组件
在index.js的代码:
//引入react模块
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<App {...person}/>, document.getElementById('root'));
在App.js的代码:
import React from 'react';
//使用函数组件
function App(props){
//在组件中获取props属性值
return <div>{this.props.name},{this.props.age}</div>
}
//定义数据
const person ={
name:'三三',
age:13,
sex:'男'
}
export default App;
使用类(class)组件
import React from 'react';
import ReactDOM from 'react-dom';
//使用class组件
class User extends React.Component{
render(){
return (
<div>{this.props.name},{this.props.age}</div>
);
}
}
//数据
const person ={
name:'三',
age:20,
sex:'男'
}
ReactDOM.render(
<User {...person}></User>
, document.getElementById('root'));
1.2state属性(重点)
代码实例:
import React from 'react';
import ReactDOM from 'react-dom';
class Person extends React.Component{
//构造方法
constructor(){
super();
this.state = {
name: 'tom'
}
}
render(){
//state属性是可修改的
this.state.name = 'san';
return (
<h1>{this.state.name}</h1>
);
}
}
ReactDOM.render(<Person />, document.getElementById('root'));
设置状态:setState
setState
不能在组件内部通过this.state修改状态,因为该状态会在调用setState()后被替换。
setState()并不会立即改变this.state,而是创建一个即将处理的state。setState()并不一定是同步的,为了提升性能React会批量执行state和DOM渲染。
setState()总是会触发一次组件重绘,除非在shouldComponentUpdate()中实现了一些条件渲染逻辑
1.3props属性和state属性的区别(重点)
- props中的数据都是外界传递过来的;
- state中的数据都是组件私有的;
- props中的数据都是只读的,不能重新赋值;
- state中的数据,都是可读可写的;
- 子组件只能通过props传递数据;
3.父子组件传值
3.1父传子(重点)
通过props属性,将父组件的state传递给子组件。
代码实例:
index.js代码
import React from 'react';
import ReactDOM from 'react-dom';
//引入父元素
import Father from './Father';
//渲染父元素
ReactDOM.render(<Father />, document.getElementById('root'));
Father.js代码
import React from 'react';
//引入子元素
import Son from './Son';
// 父类
class Father extends React.Component{
//渲染
render(){
return (
// 固定标签不生成div
<React.Fragment>
{/* 使用Son的模板 */}
<Son sonMess={'sansan'}/>
</React.Fragment>
)
}
}
//暴露模块
export default Father;
Son.js代码
import React from 'react';
class Son extends React.Component{
render(){
return(
<React.Fragment>
{this.props.sonMess}
</React.Fragment>
)
}
}
export default Son;
3.2子传父(重点)
代码实例:
index.js代码
import React from 'react';
import ReactDOM from 'react-dom';
//引入父元素
import Father from './Father';
//渲染父元素
ReactDOM.render(<Father />, document.getElementById('root'));
Father.js代码
import React from 'react';
import Son from './Son';
//父组件
class Father extends React.Component{
// 构造函数
constructor(){
super();
this.state = {
message: ''
}
}
// 声明一个函数,用户接收子组件的传值
getSonMess(msg){
//把子组件传递过来的值赋给this.state中的属性
this.setState({
mess: msg
});
}
render(){
return (
<React.Fragment>
<Son getdata={this.getDatas.bind(this)}></Son>
<div>展示数据:{this.state.mess}</div>
</React.Fragment>
);
}
}
//暴露模块
export default Father;
Son.js代码
import React from 'react';
//子组件
class Son extends React.Component{
//构造方法
constructor(){
super();
this.state = {
mes:''
}
}
handleClick(){
//通过props属性获取父组件的getdata方法,并将this.state值传递过去
this.props.getdata(this.state.mes);
}
// 渲染
render(){
// 返回一个值
return (
<React.Fragment>
<button onClick={this.handleClick.bind(this)}>点击获取数据</button>
</React.Fragment>
);
}
}
export default Son;
3.2兄弟传值(重点)
代码实例:
index.js代码
import React from 'react';
import ReactDOM from 'react-dom';
import Father from './Father';
ReactDOM.render(<Father></Father>, document.getElementById('root'));
Farher.js代码
import React from 'react';
import Son from './Son';
import Son2 from './Son2';
//父组件
class Father extends React.Component{
constructor(){
super();
this.state = {
message:''
}
}
//用于接收Son.js组件的数据函数
sonDatas(msg){
this.setState({
message:msg
});
console.log("在Father.js中展示Son.js生成的数据:"+msg);
}
render(){
return (
<React.Fragment>
<h1>在Father组件中显示:</h1>
<Son sondata={this.sonDatas.bind(this)}></Son>
<Son2 mess={this.state.message}></Son2>
</React.Fragment>
);
}
}
export default Father;
Son.js代码
import React from 'react';
//子组件
class Son extends React.Component{
//按钮点击事件函数
sonClick(){
this.props.sondata('这是从Son.js中生成的数据。。。');
}
render(){
return (
<React.Fragment>
<button onClick={this.sonClick.bind(this)}>Son组件中的按钮获取数据</button>
</React.Fragment>
);
}
}
export default Son;
Son2.js代码
import React from 'react';
//子组件
class Son2 extends React.Component{
render(){
return (
<React.Fragment>
<h1>
在Son2.js中展示Son.js中生成的数据,这个是Father.js传过来的,数据是:
{this.props.mess}
</h1>
</React.Fragment>
);
}
}
export default Son2;