React组件实例的三大核心属性
三分钟看完React组件实例的三大核心属性
- props
-
- 直接传参
- 批量传参
- 参数类型限制
- state
-
- 创建方式
- 事件绑定
- 类组件自定义方法的this绑定
-
- 在构造器中绑定this
- 在回调函数中绑定
- 使用箭头函数
- refs
-
- refs的使用
-
- 使用 React.createRef() 创建 refs
- 回调形式创建refs
props
React框架定义了一个Props的概念， 专门用来实现React函数组件接受参数的输入。
直接传参
将要传递的参数放在需要被传递的组件中
<body>
<div id="root">div>
<script type="text/babel">
let root = document.getElementById('root');
class Zy extends React.Component {
render() {
console.log(this.props)
return (
<ul>
<li>姓名:{this.props.name}</li>
<li>姓名:{this.props.food}</li>
</ul>
)
}
}
ReactDOM.render(<Zy name='小花猫' food='鱼' />, root);
script>
body>
批量传参
使用解构的方法将参数放在组件中
<body>
<div id="root">div>
<script type="text/babel">
let root = document.getElementById('root');
class Zy extends React.Component {
render() {
console.log(this.props)
return (
<ul>
<li>姓名:{this.props.name}</li>
<li>姓名:{this.props.food}</li>
</ul>
)
}
}
let test = {name:'小花猫',food:'鱼'}
ReactDOM.render(<Zy {...test} />, root);
script>
body>
参数类型限制
对参数进行类型限制需要引进prop-types库
在组件上添加defaultProps属性设置props的默认值
设置propType属性来对props进行类型检查。
函数组件中用法如下：
<body>
<div id="root">div>
<script type="text/babel">
let root = document.getElementById('root');
function Person(props) {
const { name, age, address } = props;
return (
<ul>
<li>姓名：{ name }</li>
<li>年龄：{ age }</li>
<li>地址：{ address }</li>
</ul>
)
}
Person.defaultProps = {
name:'张飞',
age:28,
address:'jic'
}
//类型限制
Person.propTypes = {
name:PropTypes.string.isRequired,//string类型，必须
age:PropTypes.number,
address:PropTypes.string
}
ReactDOM.render(<Person />,root)
script>
body>
类组件的用法如下
<body>
<div id="root">div>
<script type="text/babel">
let root = document.getElementById('root');
class Zy extends React.Component {
static propTypes = {
name:propTypes.string.isRequire,
food:propTypes.string
}
static defaultProps = {
name:'小狗',
food:'骨头'
}
render() {
console.log(this.props)
return (
<ul>
<li>姓名:{this.props.name}</li>
<li>姓名:{this.props.food}</li>
</ul>
)
}
}
ReactDOM.render(<Zy name="小花猫" food="鱼" />, root);
script>
body>
state
在React框架中定义了一个状态(State) 概念， 并通过状态(State) 来实现React组件的状态机特性。所谓React组件的“状态机”特性， 就是指组件通过与用户的交互， 实现不同的状态，然后通过渲染UI保证用户界面和数据一致性。
React框架之所以定义这个状态(State) 概念， 其目的就是仅仅通过更新React组件的状态(State) ， 就可以实现重新渲染用户界面的操作(这样就不需要操作DOM了) 。这点也正React设计理念相较于其他前端框架的先进之处。
创建方式
<body>
<div id="root">div>
<script type="text/babel">
let root = document.getElementById('root');
class Zy extends React.Component {
constructor(props){
super(props),
this.state={
info:'Hello'
}
}
render(){
const {info} = this.state;
return <h2>{info}</h2>
}
}
ReactDOM.render(<Zy />, root);
script>
body>
事件绑定
响应函数采用小驼峰命名法：
onClick,onChange等。
state不能直接修改，需要使用setState方法更新。
<body>
<div id="root">div>
<script type="text/babel">
let root = document.getElementById('root');
class Zy extends React.Component {
constructor(props){
super(props),
this.state={
info:'Hello'
}
}
sayHi(){
this.setState({
info:'Hi'
})
}
render(){
const {info} = this.state;
return <h2 onClick={this.sayHi.bind(this)}>{info}</h2>
}
}
ReactDOM.render(<Zy />, root);
script>
body>
类组件自定义方法的this绑定
在构造器中绑定this
this.sayHi = this.sayHi.bind(this);
<body>
<div id="root">div>
<script type="text/babel">
let root = document.getElementById('root');
class Zy extends React.Component {
constructor(props){
super(props),
this.state={
info:'Hello'
}
this.sayHi = this.sayHi.bind(this);
}
sayHi(){
this.setState({
info:'Hi'
})
}
render(){
const {info} = this.state;
return <h2 onClick={this.sayHi}>{info}</h2>
}
}
ReactDOM.render(<Zy />, root);
script>
body>
在回调函数中绑定
<body>
<div id="root">div>
<script type="text/babel">
let root = document.getElementById('root');
class Zy extends React.Component {
constructor(props){
super(props),
this.state={
info:'Hello'
}
}
sayHi(){
this.setState({
info:'Hi'
})
}
render(){
const {info} = this.state;
return <h2 onClick={this.sayHi.bind(this)}>{info}</h2>
}
}
ReactDOM.render(<Zy />, root);
script>
body>
使用箭头函数
sayHi=()=>{ this.setState({ info:'Hi' }) }
<body>
<div id="root">div>
<script type="text/babel">
let root = document.getElementById('root');
class Zy extends React.Component {
constructor(props){
super(props),
this.state={
info:'Hello'
}
}
sayHi=()=>{
this.setState({
info:'Hi'
})
}
render(){
const {info} = this.state;
return <h2 onClick={this.sayHi}>{info}</h2>
}
}
ReactDOM.render(<Zy />, root);
script>
body>
refs
refs 提供一种访问在render方法中DOM节点或者React元素的方式。
你可以通过它获得DOM节点或者React元素。
refs的使用
使用 React.createRef() 创建 refs
<body>
<div id="root">div>
<script type="text/babel">
let root = document.getElementById('root');
class MyComponent extends React.Component {
constructor(props) {
this.myRef = React.createRef();
}
render() {
return (
<div ref={this.myRef} />
)
}
}
ReactDOM.render(<MyComponent />,root);
script>
body>
使用current属性，对节点的引用进行访问。
<body>
<div id="root">div>
<script type="text/babel">
let root = document.getElementById('root');
class MyComponent extends React.Component {
constructor(props) {
super(props)
this.myRef = React.createRef();
}
focusTextInput() {
// 注意：通过 "current" 取得 DOM 节点
alert(this.myRef.current.value)
}
render() {
return (
<div>
<input
type="text"
ref={this.myRef} //把 ref 关联到构造器里创建的 `myRef` 上
/>
<button onClick={this.focusTextInput.bind(this)}>点我</button>
</div>
);
}
}
ReactDOM.render(<MyComponent />, root);
script>
body>
回调形式创建refs
<body>
<div id="root">div>
<script type="text/babel">
let root = document.getElementById('root');
class MyComponent extends React.Component {
constructor(props) {
super(props)
}
focusTextInput = ()=>{
const {myRef} = this;
alert(myRef.value)
}
render() {
return (
<div>
<input
type="text"
ref={currentNode=>this.myRef = currentNode} //把 ref 关联到构造器里创建的 `myRef` 上
/>
<button onClick={this.focusTextInput.bind(this)}>点我</button>
</div>
);
}
}
ReactDOM.render(<MyComponent />, root);
script>
body>