Props
- React框架定义了一个Props的概念， 专门用来实现React组件接受参数的输入。
- 每个组件对象都会有props(properties的简写)属性。
- 组件标签的所有属性都保存在props中。
props是组件对外的接口：组件内可以引用其他组件，组件之间的引用形成了一个树状结构（组件树），如果下层组件需要使用上层组件的数据或方法，上层组件就可以通过下层组件的props属性进行传递，因此props是组件对外的接口。
function HelloMessage(props) {
return <h1>Hello {props.name}!</h1>;
}
const element = <HelloMessage name="Runoob"/>;
ReactDOM.render(
element,
document.getElementById('example')
);
React 组件使用props来相互通信。
- 父组件给子组件传值：父组件通过初始state，子组件通过this.props进行接收就可以
// 父组件
import React, { Component } from 'react';
import Home from './Home'; //引入子组件
class App extends Component {
constructor(props){
super(props);
this.state = {
num: 90
}
};
render() {
return (
<div>
<Home name="raeam" num={this.state.num}/>
</div>
);
}
}
export default App;
//子组件
import React, { Component } from 'react';
class Home extends Component {
constructor(props){
super(props);
};
render() {
return (
<div>
{this.props.name}
{this.props.num}
</div>
);
}
}
export default Home;
React Props默认值：
- React框架为类组件定义了一个默认Props –
defaultProps,使用defaultProps默认值来实现React Props应用
类组件使用props、类组件外边定义默认值：
<div id="id-div-react"></div>
<script type="text/">
var divReact = document.getElementById('id-div-react');
//创建类组件
class PropsReactComp extends React.Component {
render () {
return <p>{this.props.default}</p>
}
}
//类组件添加默认值
PropsReactComp.defaultProps = {
default: '我是默认值'
}
ReactDOM.render(<PropsReactComp/>,divReact);
</script>
类组件使用props、类组件里面定义默认值：
//创建组件
class Person extends React.Component{
constructor(props){
//构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props
super(props);
console.log('constructor',this.props);
}
//对标签属性进行类型、必要性的限制
static propTypes = {
name:PropTypes.string.isRequired, //限制name必传，且为字符串
sex:PropTypes.string,//限制sex为字符串
age:PropTypes.number,//限制age为数值
}
//指定默认标签属性值
static defaultProps = {
sex:'nv',
age:18
}
render(){
const {name,age,sex} = this.props
//props是只读的
//this.props.name = 'bei' //此行代码会报错，因为props是只读的
return (
<ul>
<li>姓名：{name}</li>
<li>性别：{sex}</li>
<li>年龄：{age+1}</li>
</ul>
)
}
}
//渲染组件到页面
ReactDOM.render(<Person name="南栀"/>,document.getElementById('test1'))
函数组件使用props
//创建组件
function Person (props){
const {name,age,sex} = props;
return (
<ul>
<li>姓名：{name}</li>
<li>性别：{sex}</li>
<li>年龄：{age}</li>
</ul>
)
}
//指定默认标签属性值
Person.defaultProps = {
sex:'男',//sex默认值为男
age:18 //age默认值为18
}
//渲染组件到页面
ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1'))
React框架规定Props是不能被修改的，也就是说Props是个只读的参数。 但是有一种情形它貌似可变，即是将父组件的state作为子组件的props，当父组件的state改变，子组件的props也跟着改变。
State
函数组件无状态属性，没有生命周期的概念，可以通过React Hooks模拟出来。
本文举例说明的是类组件的状态属性。
state是组件对内的接口：组件除了使用上层组件传递的数据外，自身也可能需要维护管理数据，这就是组件对内的接口state。- 在class定义组件中添加state ：直接添加在constructor构造器中 以this.state={} 的方式添加。
- 修改 通过this.setState（{}） 进行state的改变
- 访问 通过this.state.属性名
使用State：
- 使用
setState修改state
this.setState({comment:'Hello'})
constructor(props){
super(props)
// 定义state状态
this.state = {
flag: true,
firstMsg: "天王盖地虎",
lastMsg : "小鸡炖蘑菇"
}
}
State向下流动：
- 一个组件可以选择将 state(状态) 向下传递，作为其子组件的 props(属性)
- 如果把组件树想像为 props(属性) 的瀑布，所有组件的 state(状态)就如同一个额外的水源汇入主流，且只能随着主流的方向向下流动。
<MyComponent title={this.state.title}/>
Ref
- Refs在计算机中称为
弹性文件系统（英语：Resilient File System，简称ReFS）。 - React中的Refs提供了一种方式，允许我们访问DOM节点或在render方法中创建的React元素。
- 本质为ReactDOM.render()返回的组件实例，如果是渲染组件则返回的是组件实例，如果渲染dom则返回的是具体的dom节点。
方式一：createRef()：
- 一般在构造函数中将refs分配给实例属性，以供组件的其它方法中使用
- 对于html元素：可以获取元素实例：
<div id="div-react"></div>
<script type="text/babel">
class RefsComponent extends React.Component {
constructor(props) {
super(props);
//在构造函数中初始化一个Ref,然后再return中就可以使用
this.myRef = React.createRef();
console.log(this.myRef);
}
componentDidMount() {
//this.myRef中有一个current属性
this.myRef.current.innerHTML = '南栀'
}
render() {
return (
<div>
<div ref={ this.myRef }></div>
</div>
)
}
}
ReactDOM.render(<RefsComponent/>,document.getElementById('div-react'));
</script>
- 对于类组件：可以获取组件类的实例：
<div id="div-react"></div>
<script type="text/babel">
class Parent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
console.log(this.myRef);
}
componentDidMount() {
//this.myRef中有一个current属性
this.myRef.current.bianshen(); //父组件中调用子组件的方法
}
render() {
return (
<Children ref={this.myRef}/>
)
}
}
class Children extends React.Component {
bianshen() {
console.log('超人变身！！！');
}
render() {
return <span>超人变身</span>
}
}
ReactDOM.render(<Parent/>,document.getElementById('div-react'));
</script>
方式二：回调Refs
- React 将在组件挂载时，会调用 ref 回调函数并传入 DOM 元素，当卸载时调用它并传入 null。
- 在 componentDidMount 或 componentDidUpdate 触发前，React 会保证 refs 一定是最新的。
<div id="div-react"></div>
<script type="text/babel">
class Example extends React.Component {
constructor(props) {
super(props);
this.targetRef = null;
this.myRef = (e) => this.targetRef = e;
}
componentDidMount() {
if(this.targetRef) {
this.targetRef.innerHTML = '南栀';
}
}
render() {
return <div ref={this.myRef}/>
}
}
ReactDOM.render(<Example/>,document.getElementById('div-react'));
</script>
方式三：useRef(React Hooks)
import { useRef } from 'react';
function HookRef(props) {
const inputElement = useRef();
return (
<div>
<input type="text" ref={inputElement}/>
<button onClick = {() => {
inputElement.current.focus()
}}>获得焦点</button>
</div>
)
}
export default HookRef;
Ref的作用：Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。在类组件中，React将ref属性中第一个参数作为DOM中的句柄。而函数组件中,react用hooks的api useRef也能获得ref。
1949
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
