来自 软件资讯 2019-10-01 08:18 的文章
当前位置: 威尼斯国际官方网站 > 软件资讯 > 正文

【奥门威尼斯网址】组件、Prop 和 State

总结

好啦,这就是 prop 和 state 。prop 是组件的配置项,它的值是在组件创建之前就已经决定好了,比如门的形状和屋顶的颜色就可以定义为 prop。prop 的值永远不会改变。而 state 是组件的私有数据,当组件创建后才可以使用它。比如门的开关状态可以包括在 state 里面。state 会随着一些外部事件的发生而变化。这些所谓的外部事件通常包括:用户输入了数据,或者从服务端获取了数据,又或者是定时器的触发。

但…是,我们还没有开发任何实际的东西啊?一个只显示纯文本的应用能有多大用处呢?至少要学到如何建造本文开头所说的房子吧?界面里有东西可以点才有用啊?

毫无疑问,要做到这些呢,我们就需要用 JavaScript 编程了。这个以后再讲吧。如果你不喜欢等待,可以注册我的课程并通过教学视频进行学习。

1 赞 1 收藏 评论

奥门威尼斯网址 1

Props 验证

Props 验证使用 propTypes,它可以保证我们的应用组件被正确使用,React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效。当向 props 传入无效数据时,JavaScript 控制台会抛出警告。
以下实例创建一个 Mytitle 组件,属性 title 是必须的且是字符串,非字符串类型会自动转换为字符串 :

var title = "菜鸟教程";
// var title = 123;
var MyTitle = React.createClass({
  propTypes: {
    title: React.PropTypes.string.isRequired,
  },

  render: function() {
     return <h1> {this.props.title} </h1>;
   }
});
ReactDOM.render(
    <MyTitle title={title} />,
    document.getElementById('example')
);

更多验证器说明如下:

React.createClass({
  propTypes: {
    // 可以声明 prop 为指定的 JS 基本数据类型,默认情况,这些数据是可选的
   optionalArray: React.PropTypes.array,
    optionalBool: React.PropTypes.bool,
    optionalFunc: React.PropTypes.func,
    optionalNumber: React.PropTypes.number,
    optionalObject: React.PropTypes.object,
    optionalString: React.PropTypes.string,

    // 可以被渲染的对象 numbers, strings, elements 或 array
    optionalNode: React.PropTypes.node,

    //  React 元素
    optionalElement: React.PropTypes.element,

    // 用 JS 的 instanceof 操作符声明 prop 为类的实例。
    optionalMessage: React.PropTypes.instanceOf(Message),

    // 用 enum 来限制 prop 只接受指定的值。
    optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),

    // 可以是多个对象类型中的一个
    optionalUnion: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.number,
      React.PropTypes.instanceOf(Message)
    ]),

    // 指定类型组成的数组
    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),

    // 指定类型的属性构成的对象
    optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),

    // 特定 shape 参数的对象
    optionalObjectWithShape: React.PropTypes.shape({
      color: React.PropTypes.string,
      fontSize: React.PropTypes.number
    }),

    // 任意类型加上 `isRequired` 来使 prop 不可空。
    requiredFunc: React.PropTypes.func.isRequired,

    // 不可空的任意类型
    requiredAny: React.PropTypes.any.isRequired,

    // 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接使用 `console.warn` 或抛异常,因为这样 `oneOfType` 会失效。
    customProp: function(props, propName, componentName) {
      if (!/matchme/.test(props[propName])) {
        return new Error('Validation failed!');
      }
    }
  },
  /* ... */
});

组件

如果你还记得我们在前面文章中所讨论过的,组件的概念是 React 的三大支柱之一。使用 React 开发应用基本都是在使用组件。

第一步是将 UI 分解成多个组件。例如,我们可以这样来拆分房子:

奥门威尼斯网址 2

现在来编码!

House: <div> <Roof /> // 房顶 <Wall /> // 墙 <Window /> // 窗 <Door /> // 门 </div>

1
2
3
4
5
6
7
8
House:
 
  <div>
    <Roof />     // 房顶
    <Wall />     // 墙
    <Window />   // 窗
    <Door />     // 门
  </div>

等一下,怎么看起来这么像 HTML ?没错!React 的部分代码看上去就是非常像 HTML ,其实就是这样设计的,这是为了让 Web 设计师理解和编写 React 代码更容易一些。太贴心了!

因此,在上面的代码中,我们使用 ``

作为容器,这基本和 HTML 中是一样的。而像 RoofWall 这样的标签是我们即将定义的自定义标签/组件。温馨提示: 上面的代码并非实际的 React 代码,甚至连 JavaScript 都算不上。暂时,我们只使用这种宽松的语法来介绍概念。一旦你理解这些概念后,我们再来学习 JavaScript 的细节并将上述概念转换成真实代码。

为了让这个例子更容易理解一些,我再简化一下: 从现在开始,我们来写一个超级简单的 Web 应用,连图片都不用,只显示文字。

例如,Roof 其实就是一个里面有文字的 div :

Roof: <div>roof</div>

1
2
3
Roof:
 
  <div>roof</div>

其他组件也是如此,都是只有文字的 div 而已。首先,我们来看下房子的完整的 React 风格的代码:

House: <div> <Roof /> <Wall /> <Window /> <Door /> </div> Roof: <div>roof</div> Wall: <div>wall</div> Window: <div>window</div> Door: <div>door</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
House:
 
  <div>
    <Roof />
    <Wall />
    <Window />
    <Door />
  </div>  
 
Roof:
 
  <div>roof</div>
 
Wall:
 
  <div>wall</div>
 
Window:
 
  <div>window</div>
 
Door:
 
  <div>door</div>

这没什么不好理解的,是吧?House 是由 RoofWallWindowDoor 组成的,这些都是纯文本构成的组件。

最后,React 生成的 HTML 如下所示:

<div> <div>roof</div> <div>wall</div> <div>windows</div> <div>door</div> </div>

1
2
3
4
5
6
<div>
  <div>roof</div>
  <div>wall</div>
  <div>windows</div>
  <div>door</div>
</div>

设置状态:setState

setState(object nextState[, function callback])
  • 参数说明
    • nextState,将要设置的新状态,该状态会和当前的state合并
    • callback,可选参数,回调函数。该函数会在setState设置成功,且组件重新渲染后调用。
      合并nextState和当前state,并重新渲染组件。setState是React事件处理函数中和请求回调函数中触发UI更新的主要方法。

关于setState
1. 不能在组件内部通过this.state修改状态,因为该状态会在调用setState()后被替换。
2. setState()并不会立即改变this.state,而是创建一个即将处理的state。setState()并不一定是同步的,为了提升性能React会批量执行state和DOM渲染。
3. setState()总是会触发一次组件重绘,除非在shouldComponentUpdate()中实现了一些条件渲染逻辑。

var Counter = React.createClass({
  getInitialState: function () {
    return { clickCount: 0 };
  },
  handleClick: function () {
    this.setState(function(state) {
      return {clickCount: state.clickCount + 1};
    });
  },
  render: function () {
    return (<h2 onClick={this.handleClick}>点我!点击次数为: {this.state.clickCount}</h2>);
  }
});
ReactDOM.render(
  <Counter />,
  document.getElementById('message')
);

实例中通过点击 h2 标签来使得点击计数器加 1。

为组件添加 State

组件还可以拥有 state 。那么什么是 state ?state 是一种可以在组件创建后更改的数据。

举个例子,门既可以开,又可以关。我们可以说门的状态就是 state ,因为它的值是可以在门创建后更改的。在这点上,state 与 prop 是不同的,prop 是不会改变的,比如门的形状。

状态值的改变通常是由外部事件所引起的。在 Web 应用中,这些所谓的外部事件通常包括:用户输入了数据,或者从服务端获取了数据,又或者是定时器的触发。

下面,我们来为门添加 state :

Door: State: status // "open" 或 "closed" <div>Door is {state.status}</div>

1
2
3
4
Door:
  State:
    status   // "open" 或 "closed"
  <div>Door is {state.status}</div>

props 类似,state 也是组件内部所有状态值的集合。因此,我们可以在组件定义的模板中使用 state.[something]

接下来,我们来添加一些处理用户输入的“伪代码”来让门具有交互性。

Door: State: status // "open" 或 "closed" <div>Door is {state.status}</div> // 处理用户输入 当开门时 将 state.status 修改成 "open" 当关门时 将 state.status 修改成 "closed"

1
2
3
4
5
6
7
8
9
10
Door:
State:
  status // "open" 或 "closed"
 
  <div>Door is {state.status}</div>
  // 处理用户输入
  当开门时
    将 state.status 修改成 "open"
  当关门时
    将 state.status 修改成 "closed"

这里的关键点是组件的 state 是随时间而变化的。模板的输出,也就是生成的 HTML 会根据 state 的变化而自动改变。

顺便说句,不要忘了上面的只是“伪代码”,而不是 React 代码。不要尝试将其复制黏贴到你的项目中!否则你的电脑炸了我不负责……

State 和 Props

我们可以在父组件中设置 state, 并通过在子组件上使用 props 将其传递到子组件上。在 render 函数中, 我们设置 name 和 site 来获取父组件传递过来的数据。

var WebSite = React.createClass({
  getInitialState: function() {
    return {
      name: "菜鸟教程",
      site: "http://www.runoob.com"
    };
  },

  render: function() {
    return (
      <div>
        <Name name={this.state.name} />
        <Link site={this.state.site} />
      </div>
    );
  }
});

var Name = React.createClass({
  render: function() {
    return (
      <h1>{this.props.name}</h1>
    );
  }
});

var Link = React.createClass({
  render: function() {
    return (
      <a href={this.props.site}>
        {this.props.site}
      </a>
    );
  }
});

ReactDOM.render(
  <WebSite />,
  document.getElementById('example')
);

State 是私有的

组件的 state 是私有的。门无论是开还是关,这都仅仅是门的逻辑。与房子或其他组件没有任何关系。事实上,我们完全可以将门从房子中移出去,它仍然可以自己打开或关闭。

因此,门的状态只有在 Door 组件内部是可见的。在 Door 组件内,我们可以读取或改写它的 state 。

House: <div> <Door /> ... <!-- 下面这句是错的 --> <div>The door is {Door.state.status}</div> </div> Window: ... <!-- 下面这句是错的! --> 将 Door.state.status 修改成 'open' Door: ... <!-- 兄dei,这还是错的! --> if House.state.正在出售 房产经纪人就可以开门

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
House:
  <div>
    <Door />
    ...
    <!-- 下面这句是错的 -->
    <div>The door is {Door.state.status}</div>
  </div>
 
Window:
  ...
  <!-- 下面这句是错的! -->
  将 Door.state.status 修改成 'open'
 
Door:
  ...
  <!-- 兄dei,这还是错的! -->
  if House.state.正在出售
    房产经纪人就可以开门

默认 Props

你可以通过 getDefaultProps() 方法为 props 设置默认值,实例如下:

var HelloMessage = React.createClass({
  getDefaultProps: function() {
    return {
      name: 'Runoob'
    };
  },
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});

ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
);

学习目标

当你读完本文后希望你能重新回到这里,并能够轻松回答以下问题:

  • 什么是 prop ?
  • 什么是 state ?
  • 何时使用 prop ?何时使用 state ?
  • 如何让例子的窗户可以打开和关闭?
  • 你能写出 Domo 帽子那个例子的伪代码吗?

React State(状态)

(React 把组件看成是一个状态机(State Machines),通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM))

getInitialState 方法用于定义初始状态,也就是一个对象,这个对象可以通过 this.state 属性读取。当用户点击组件,导致状态变化,this.setState 方法就修改状态值,每次修改以后,自动调用 this.render 方法,再次渲染组件.

 var LikeButton = React.createClass({
        getInitialState: function() {
          return {liked: false};
        },
        handleClick: function(event) {
          this.setState({liked: !this.state.liked});
  },
  render: function() {
    var text = this.state.liked ? '喜欢' : '不喜欢';
    return (
      <p onClick={this.handleClick}>
        你<b>{text}</b>我。点我切换状态。
      </p>
    );
  }
});

ReactDOM.render(
  <LikeButton />,
  document.getElementById('example')
);

使用 Props 来配置屋顶的颜色

想象一下,我们将规格说明书发给一个工厂,这个工厂负责代工所有的零部件。在规格说明书中,我们可以告诉工厂每个部件的固有属性,比如屋顶的颜色、门的形状,等等。在按照我们的要求将屋顶和门生产出来后,它们的属性不会产生任何变化,屋顶还是蓝色的,门依旧是矩形的。这些属性压根不会改变。

在 React 里,我们将这些属性称之为 Prop ,即 property 的缩写。关于 Prop ,你需要记住两点: 首先,我们来决定 Prop 的值,并在组件构建之前将其作为组件设计的一部分。其次,Prop 的值永远不会改变。

那 prop 在代码中是怎样的呢?在 House 组件中,如果我们想要蓝色屋顶的话,只需在 Roof 组件上添加 “color” 属性。这就好比是在发给工厂的规格说明书中指定颜色。

这有点类似于给 HTML 标签添加属性:

House: <div> <Roof color="blue"/> ... </div>

1
2
3
4
5
6
House:
 
  <div>
    <Roof color="blue"/>
    ...
  </div>

Roof里面又是怎么样使用 prop 的呢?代码如下所示:

Roof: <div>{props.color} roof</div>

1
2
3
Roof:
 
  <div>{props.color} roof</div>

就这样?没错!但是有几点需要注意:

  • 定义组件的 HTML 风格代码是一个模板,而不是单纯的 HTML 标签。这意味着我们可以在其中放置占位符来改变 HTML 输出的内容,而不必重复编写不同的 HTML (还记得 Domo 的帽子吗?这就是占位符的概念!)。在这个示例中,<Roof color="blue" /> 生成的 HTML 是 <div>blue roof<div>,而 <Roof color="red" /> 生成的是 <div>red roof</div>,以此类推。
  • 模板中使用的花括号告诉 React 我们要在此处使用占位符来替代纯文本。
  • props 可以看作是 Roof 组件所有属性值的集合。假设组件是这样使用的: <Roof color="blue" material="wood" /> ,那么在 Roof 组件的定义中就可以使用 props.color和 props.material 。

判断组件挂载状态:isMounted

bool isMounted()
返回值:true或false,表示组件是否已挂载到DOM中
isMounted()方法用于判断组件是否已挂载到DOM中。可以使用该方法保证了setState()和forceUpdate()在异步场景下的调用不会出错。

React 组件生命周期
组件的生命周期可分成三个状态:
Mounting:已插入真实 DOM
Updating:正在被重新渲染
Unmounting:已移出真实 DOM
生命周期的方法有:
componentWillMount 在渲染前调用,在客户端也在服务端。
componentDidMount : 在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用,可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。
componentWillReceiveProps 在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。
shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
可以在你确认不需要更新组件时使用。
componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
componentWillUnmount在组件从 DOM 中移除的时候立刻被调用。
以下实例在 Hello 组件加载以后,通过 componentDidMount 方法设置一个定时器,每隔100毫秒重新设置组件的透明度,并重新渲染:
React 实例
var Hello = React.createClass({
getInitialState: function () {
return {
opacity: 1.0
};
},

componentDidMount: function () {
this.timer = setInterval(function () {
var opacity = this.state.opacity;
opacity -= .05;
if (opacity < 0.1) {
opacity = 1.0;
}
this.setState({
opacity: opacity
});
}.bind(this), 100);
},

render: function () {
return (
<div style={{opacity: this.state.opacity}}>
Hello {this.props.name}
</div>
);
}
});

ReactDOM.render(
<Hello name="world"/>,
document.body
);

以下实例初始化 state , setNewnumber 用于更新 state。所有生命周期在 Content 组件中。
React 实例
var Button = React.createClass({
getInitialState: function() {
return {
data:0
};
},
setNewNumber: function() {
this.setState({data: this.state.data + 1})
},
render: function () {
return (
<div>
<button onClick = {this.setNewNumber}>INCREMENT</button>
<Content myNumber = {this.state.data}></Content>
奥门威尼斯网址 ,</div>
);
}
})
var Content = React.createClass({
componentWillMount:function() {
console.log('Component WILL MOUNT!')
},
componentDidMount:function() {
console.log('Component DID MOUNT!')
},
componentWillReceiveProps:function(newProps) {
console.log('Component WILL RECEIVE PROPS!')
},
shouldComponentUpdate:function(newProps, newState) {
return true;
},
componentWillUpdate:function(nextProps, nextState) {
console.log('Component WILL UPDATE!');
},
componentDidUpdate:function(prevProps, prevState) {
console.log('Component DID UPDATE!')
},
componentWillUnmount:function() {
console.log('Component WILL UNMOUNT!')
},

render: function () {
  return (
    <div>
      <h3>{this.props.myNumber}</h3>
    </div>
  );
}

});
ReactDOM.render(
<div>
<Button />
</div>,
document.getElementById('example')
);

React AJAX
React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取,当从服务端获取数据库可以将数据存储在 state 中,再用 this.setState 方法重新渲染 UI。
当使用异步加载数据时,在组件卸载前使用 componentWillUnmount 来取消未完成的请求。
以下实例演示了获取 Github 用户最新 gist 共享描述:
React 实例
var UserGist = React.createClass({
getInitialState: function() {
return {
username: '',
lastGistUrl: ''
};
},

componentDidMount: function() {
this.serverRequest = $.get(this.props.source, function (result) {
var lastGist = result[0];
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
});
}.bind(this));
},

componentWillUnmount: function() {
this.serverRequest.abort();
},

render: function() {
return (
<div>
{this.state.username} 用户最新的 Gist 共享地址:
<a href={this.state.lastGistUrl}>{this.state.lastGistUrl}</a>
</div>
);
}
});

ReactDOM.render(
<UserGist source="" />,
document.getElementById('example')
);

React 表单与事件
在实例中我们设置了输入框 input 值value = {this.state.data}。在输入框值发生变化时我们可以更新 state。我们可以使用 onChange 事件来监听 input 的变化,并修改 state。
React 实例
var HelloMessage = React.createClass({
getInitialState: function() {
return {value: 'Hello Runoob!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function() {
var value = this.state.value;
return <div>
<input type="text" value={value} onChange={this.handleChange} />
<h4>{value}</h4>
</div>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);

上面的代码将渲染出一个值为 Hello Runoob! 的 input 元素,并通过 onChange 事件响应更新用户输入的值。
实例 2
在以下实例中我们将为大家演示如何在子组件上使用表单。 onChange 方法将触发 state 的更新并将更新的值传递到子组件的输入框的 value 上来重新渲染界面。
你需要在父组件通过创建事件句柄 (handleChange) ,并作为 prop (updateStateProp) 传递到你的子组件上。
React 实例
var Content = React.createClass({
render: function() {
return <div>
<input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp} />
<h4>{this.props.myDataProp}</h4>
</div>;
}
});
var HelloMessage = React.createClass({
getInitialState: function() {
return {value: 'Hello Runoob!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function() {
var value = this.state.value;
return <div>
<Content myDataProp = {value}
updateStateProp = {this.handleChange}></Content>
</div>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);

React 事件
以下实例演示通过 onClick 事件来修改数据:
React 实例
var HelloMessage = React.createClass({
getInitialState: function() {
return {value: 'Hello Runoob!'};
},
handleChange: function(event) {
this.setState({value: '菜鸟教程'})
},
render: function() {
var value = this.state.value;
return <div>
<button onClick={this.handleChange}>点我</button>
<h4>{value}</h4>
</div>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);

当你需要从子组件中更新父组件的 state 时,你需要在父组件通过创建事件句柄 (handleChange) ,并作为 prop (updateStateProp) 传递到你的子组件上。实例如下:
React 实例
var Content = React.createClass({
render: function() {
return <div>
<button onClick = {this.props.updateStateProp}>点我</button>
<h4>{this.props.myDataProp}</h4>
</div>
}
});
var HelloMessage = React.createClass({
getInitialState: function() {
return {value: 'Hello Runoob!'};
},
handleChange: function(event) {
this.setState({value: '菜鸟教程'})
},
render: function() {
var value = this.state.value;
return <div>
<Content myDataProp = {value}
updateStateProp = {this.handleChange}></Content>
</div>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);

React Refs
可以用来绑定到 render() 输出的任何组件上,允许你引用 render() 返回的相应的支撑实例,确保在任何时间总是拿到正确的实例
使用方法
绑定一个 ref 属性到 render 的返回值上:
<input ref="myInput" />
在其它代码中,通过 this.refs 获取支撑实例:
var input = this.refs.myInput;
var inputValue = input.value;
var inputRect = input.getBoundingClientRect();
完整实例
你可以通过使用 this 来获取当前 React 组件,或使用 ref 来获取组件的引用,实例如下:
React 实例
var MyComponent = React.createClass({
handleClick: function() {
// 使用原生的 DOM API 获取焦点
this.refs.myInput.focus();
},
render: function() {
// 当组件插入到 DOM 后,ref 属性添加一个组件的引用于到 this.refs
return (
<div>
<input type="text" ref="myInput" />
<input
type="button"
value="点我输入框获取焦点"
onClick={this.handleClick}
/>
</div>
);
}
});

ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);

盖房子

要想理解这些概念是什么以及如何使用它们,我们先来写一个小示例。就盖个房子如何?(点击门有惊喜)

查看由 focuser (@focuser) 在 CodePen 编写的 Demo : React 小屋。

使用 create-react-app 快速构建 React 开发环境

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

项目的目录结构如下:

my-app/
  README.md
  node_modules/
  package.json
  .gitignore
  public/
    favicon.ico
    index.html
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

组件、Prop 和 State

2018/08/09 · JavaScript · React

原文出处: Linton Ye   译文出处:郑丰彧   

系列博客: 用通俗的语言和涂鸦来解释 React 术语

  • 图解 React
  • 图解 React Native
  • 组件、Prop 和 State (本文)
  • 深入理解 Props 和 State (待翻译)
  • React Native vs. Cordova、PhoneGap、Ionic,等等 (待翻译)

今天我们来学习 React 里最重要的三个概念: 组件、prop 和 state ,以及 prop 和 state 之间的区别。

如同之前的文章,我还是会尝试用通俗的语言来解释这些概念。因此,阅读本文同样不需要任何 JavaScript 基础。

在本章中你根本找不到任何 JavaScript 代码,我将用一种简单的标识语言来帮助你理解主要的概念,在以后的文章里我再用 JavaScript 代码详细讲解。一步一个脚印嘛,我相信这种方法对于学习 React 或其他技术都是有效的,尤其是当你没有太多编程经验时。要是将 React 的概念和 JavaScript 的细节混在一起的话,很可能会令你不知所措!

替换属性:replaceProps

replaceProps(object nextProps[, function callback])
  • nextProps,将要设置的新属性,该属性会替换当前的props。
  • callback,可选参数,回调函数。该函数会在replaceProps设置成功,且组件重新渲染后调用。

replaceProps()方法与setProps类似,但它会删除原有props

使用 State 来开门

React JSX

你的 React JSX 代码可以放在一个独立文件上,例如我们创建一个 helloworld_react.js 文件,代码如下:

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

然后在 HTML 文件中引入该 JS 文件:

<body>
  <div id="example"></div>
<script type="text/babel" src="helloworld_react.js"></script>
</body>

var myStyle = {
    fontSize: 100,
    color: '#FF0000'
};
ReactDOM.render(
    <h1 style = {myStyle}>菜鸟教程</h1>,
    document.getElementById('example')
);

var arr = [
  <h1>菜鸟教程</h1>,
  <h2>学的不仅是技术,更是梦想!</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);
  1. 可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中

  2. 在 JSX 中不能使用 if else 语句,但可以使用 conditional (三元运算) 表达式来替代

  3. 注释需要写在花括号中

  4. 要渲染 HTML 标签,只需在 JSX 里使用小写字母的标签名;要渲染 React 组件,只需创建一个大写字母开头的本地变量

本文由威尼斯国际官方网站发布于软件资讯,转载请注明出处:【奥门威尼斯网址】组件、Prop 和 State

关键词: