一. 特点
1. 声明式设计 React 采用声明范式, 可以轻松描述应用
2. 高效 React 通过对 DOM 的模拟, 最大限度地减少与 DOM 的交互
3. 灵活 React 可以与已知的库或框架很好地配合
4.JSX JSX 是 JavaScript 语法的扩展 React 开发不一定使用 JSX , 但我们建议使用它
5. 组件 通过 React 构建组件, 使得代码更加容易得到复用, 能够很好的应用在大项目的开发中
6. 单向响应的数据流 React 实现了单向响应的数据流, 从而减少了重复代码, 这也是它为什么比传统数据绑定更简单
二. 组件
- class App extends React.Component{render(){
- return <p>
- <h1>Hello World</h1>
- </p>
- }
- }
- ReactDOM.render(
- <App />,
- document.getElementById("root")
- )
注意, 原生 html 元素名以小写字母开头, 而自定义的 React 类名以大写字母开头, 比如 HelloMessage 不能写成 helloMessage 除此之外还需要注意组件类只能包含一个顶层标签, 否则也会报错
如果我们需要向组件传递参数, 可以使用 this.props 对象, 实例如下:
- class App extends React.Component{
- render(){
- return <p>
- <h1>Hello World</h1>
- <p>{this.props.name}</p>
- </p>
- }
- }
- ReactDOM.render(
- <App name='今天写的第一个组件' />,
- document.getElementById("root")
- )
注意, 在添加属性时, class 属性需要写成 className ,for 属性需要写成 htmlFor , 这是因为 class 和 for 是 JavaScript 的保留字
复合组建
- ReactDOM.render(
- <App name='今天写的第一个组件' />,
- document.getElementById("root")
- )
- class App extends React.Component{
- render(){
- return <p>
- <h1>Hello World</h1>
- <p>{this.props.name}</p>
- <Text site="https://www.runoob.com" />
- </p>
- }
- }
- class Text extends React.Component{
- render(){
- return<p>
- <a href={this.props.site}>
- {this.props.site}
- </a>
- </p>
- }
- }
3. 状态和事件
- class App extends React.Component{
- constructor(...args){
- super(...args)
- this.state={
- value:''
- }
- }
- fn(ev){
- this.setState({value:ev.target.value})
- }
- render(){
- return <p>
- <input type="text" onClick={this.fn.bind(this)} />
- <p>{this.state.value}</p>
- </p>
- }
- }
- class Text extends React.Component{
- render(){
- return<p>
- <a href={this.props.site}>
- {this.props.site}
- </a>
- </p>
- }
- }
- class App extends React.Component{
- constructor(...args){
- super(...args)
- this.state = {
- display:'block'
- }
- }
- fn(){
- this.setState({
- display:this.state.display=='block'? 'none': 'block',
- })
- }
- render(){
- return<p>
- <p onClick={this.fn.bind(this)}> 点击显示隐藏 </p>
- <p style={{display:this.state.display}}> 显示隐藏 </p>
- </p>
- }
- }
getInitialState 方法用于定义初始状态, 也就是一个对象, 这个对象可以通过 this.state 属性读取当用户点击组件, 导致状态变化, this.setState 方法就修改状态值, 每次修改以后, 自动调用 this.render 方法, 再次渲染组件
来源: https://www.2cto.com/kf/201802/722783.html