2. React面向组件编程
Posted 友人A ㅤ
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2. React面向组件编程相关的知识，希望对你有一定的参考价值。
1. 基本理解和使用
先在Google安装React Develop Tools插件。
以美团页面为例，安装成功后可以在开发者工具看到添加了Components和Prifiler选项：
react中定义组件
- 函数式组件：适用于简单组件的定义
执行
ReactDOM.render(<Demo/>, document.getElementById('test'))之后，发生了什么？
- React解析组件标签，找到Demo组件
- 发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，呈现在页面中
- 类式组件：适用于复杂组件的定义
执行
ReactDOM.render(<MyComponent />, document.getElementById('test'))之后，发生了什么？
- React解析组件标签，找到MyComponent组件
- 发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法
- 将render返回的虚拟DOM转为真实DOM，呈现在页面中
2. 组件三大核心属性之：state
state是组件对象最重要的属性，值是对象（可以包含多个 key-value 的组合）。
可以通过更新组件的state来更新对应的页面显示（重新渲染组件）。
注意：
- 组件中render方法中的this为组件实例对象
- 解决组件自定义的方法中this为undefined的问题：
- 强制绑定this：通过函数对象的bind()
- 箭头函数
- 状态数据， 不能直接修改或更新
<body>
<div id="test"></div>
<script src="../../js/react.development.js"></script>
<script src="../../js/react-dom.development.js"></script>
<script src="../../js/babel.min.js"></script>
<script type="text/babel">
// 1. 创建类式组件
class Weather extends React.Component
constructor(props)
super(props);
// 初始化状态
this.state =
isHot: true
// 解决changeWeather中this的指向问题
this.changeWeather = this.changeWeather.bind(this);
// changeWeather放在Weather的原型对象上，供实例调用
// changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用
changeWeather()
// 类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined
console.log(this); // undefined
// 获取原来的isHot值
const isHot = this.state.isHot
// 状态（state）不能直接更改，要借助内置API（setState）去更改
// this.state.isHot = !isHot // 错误写法
this.setState(
isHot: !isHot
)
render()
// 读取状态
const isHot = this.state;
return <h1 onClick=this.changeWeather>今天天气很isHot ? '炎热' : '凉快'</h1>
// 2. 渲染组件到页面
ReactDOM.render(<Weather />, document.getElementById('test'));
</script>
</body>
state的简写方式：
<script type="text/babel">
class Weather extends React.Component
state =
isHot: true
// 自定义方法，要用赋值语句的形式 + 箭头函数
changeWeather = () =>
const isHot = this.state.isHot
this.setState(
isHot: !isHot
)
render()
const isHot = this.state;
return <h1 onClick=this.changeWeather>今天天气很isHot ? '炎热' : '凉快'</h1>
ReactDOM.render(<Weather />, document.getElementById('test'));
</script>
3. 组件三大核心之：props
每个组件都会有 props 属性，组件标签的所有属性都保存在 props 中。
3.1 props基础
props的简单使用：
<script type="text/babel">
// 创建组件
class Person extends React.Component
render()
console.log(this);
// 提前解构赋值，就可以直接使用解构之后的值
const name, age, gender = this.props;
return (
<ul>
<li>姓名：this.props.name</li>
<li>性别：this.props.age</li>
<li>年龄：this.props.gender</li>
<br />
<li>姓名：name</li>
<li>性别：age</li>
<li>年龄：gender</li>
</ul>
)
ReactDOM.render(<Person name="张三" age="12" gender="男" />, document.getElementById('test'));
</script>
批量传递props：
<script type="text/babel">
// 创建组件
class Person extends React.Component
render()
console.log(this);
// 提前解构赋值，就可以直接使用解构之后的值
const name, age, gender = this.props;
return (
<ul>
<li>姓名：name</li>
<li>性别：age</li>
<li>年龄：gender</li>
</ul>
)
// 实际开发中获取到的数据一般是一个对象
const p = name: "张三", age: "12", gender: "男"
// ReactDOM.render(<Person name="张三" age="12" gender="男" />, document.getElementById('test'));
ReactDOM.render(<Person ...p />, document.getElementById('test'));
</script>
对props进行限制：
<body>
<div id="test"></div>
<script src="../../js/react.development.js"></script>
<script src="../../js/react-dom.development.js"></script>
<script src="../../js/babel.min.js"></script>
<!-- 引入prop-types，用于对组件标签属性进行限制 -->
<script src="../../js/prop-types.js"></script>
<script type="text/babel">
// 创建组件
class Person extends React.Component
render()
console.log(this);
// 提前解构赋值，就可以直接使用解构之后的值
const name, age, gender = this.props;
return (
<ul>
<li>姓名：name</li>
<li>性别：age + 1</li>
<li>年龄：gender</li>
</ul>
)
// 对标签属性做类型、必要性的限制（注意p的大小写）
Person.propTypes =
// name: PropTypes.string, // 限制name类型为字符串
name: PropTypes.string.isRequired, // 设置name为字符串且必传
gender: PropTypes.string,
age: PropTypes.number,
speak: PropTypes.func // 限制speak为函数
// 设置默认值
Person.defaultProps =
gender: '保密',
age: 18
function speak()
console.log("hello");
// 实际开发中获取到的数据一般是一个对象
ReactDOM.render(<Person name="张三" age=12 speak=speak />, document.getElementById('test'));
</script>
</body>
props是只读的：
this.props.name = '李四'; // props是只读的，此行代码会报错
props的简写方式：
<script type="text/babel">
// 创建组件
class Person extends React.Component
// 对标签属性做类型、必要性的限制（注意p的大小写）
static propTypes =
name: PropTypes.string.isRequired, // 设置name为字符串且必传
gender: PropTypes.string,
age: PropTypes.number,
speak: PropTypes.func // 限制speak为函数
// 设置默认值
static defaultProps =
gender: '保密',
age: 18
render()
console.log(this);
// 提前解构赋值，就可以直接使用解构之后的值
const name, age, gender = this.props;
return (
<ul>
<li>姓名：name</li>
<li>性别：age + 1</li>
<li>年龄：gender</li>
</ul>
)
function speak()
console.log("hello");
// 实际开发中获取到的数据一般是一个对象
ReactDOM.render(<Person name="张三" age=12 speak=speak />, document.getElementById('test'));
</script>
3.2 类式组件中的构造器与props
// 构造器是否接收props，是否传递给super，取决于是否希望在构造器中通过this访问props
constructor(props)
super(props);
console.log(this.props); // name: '张三', gender: '保密', age: 18
// constructor()
// super();
// console.log(this.props); // undefined
//
3.3 函数式组件使用props
<script type="text/babel">
function Person(props)
const name, age, gender = props;
return (
<ul>
<li>姓名：name</li>
<li>性别：age + 1</li>
<li>年龄：gender</li>
</ul>
)
ReactDOM.render(<Person name="张三" gender="男" age=18 />, document.getElementById('test'));
</script>
4. 组件三大核心之：ref
组件内的标签可以定义ref属性来标识自己。
4.1 ref基础
字符串形式的ref（不建议使用）：
<script type="text/babel">
// 创建组件
class Demo extends React.Component
// 展示左侧输入框的数据
showData = () =>
const input1 = this.refs;
alert(input1.value);
// 展示右侧输入框数据
showData2 = () =>
const input2 = this.refs;
alert(input2.value);
render()
return (
<div>
<input ref="input1" type="text" placeholder="点击按钮提示数据" />
<button onClick=this.showData>点击提示左侧数据</button>
<input ref="input2" onBlur=this.showData2 type="text" placeholder="失去焦点提示数据" />
</div>
)
// 渲染组件到页面
ReactDOM.render(<Demo />, document.getElementById('test'));
</script>
回调函数形式的ref：
<script type="text/babel">
// 创建组件
class Demo extends React.Component
// 展示左侧输入框的数据
showData = () =>
const input1 = this;
alert(input1.value);
render()
return (
<div>
<input ref=currentNode => this.input1 = currentNode type="text" placeholder="点击按钮提示数据" />
<button onClick=this.showData>点击提示左侧数据</button>
</div>
)
// 渲染组件到页面
ReactDOM.render(<Demo />, document.getElementById('test'));
</script>
ref 回调函数以内联函数的方式定义时，在更新过程中会被执行两次：
- 第一次传入参数null（初始化）
- 第二次传入参数DOM元素
<script type="text/babel">
// 创建组件
class Demo extends React.Component
state =
isHot: false
// 展示左侧输入框的数据
showData = () =>
const input1 = this;
alert(input1.value);
// 改变天气
changeWeather = () =>
const isHot = this.state;
this.setState(
isHot: !isHot
2. React面向组件编程
React面向组件编程 - 基本理解和使用 - 组件三大核心属性state-props-refs - 事件处理 - 非受控组件 - 受控组件 - 高阶函数 - 函数柯里化