1.概念
用于构建用户界面的 JavaScript 库。
2.特点
1、声明式:React 可以非常轻松地创建用户交互界面。为你应用的每一个状态设计简洁的视图,在数据改变时 React 也可以高效地更新渲染界面。以声明式编写UI,可以让你的代码更加可靠,且方便调试。
2、组件化:创建好拥有各自状态的组件,再由组件构成更加复杂的界面。无需再用模版代码,通过使用JavaScript编写的组件你可以更好地传递数据,将应用状态和DOM拆分开来。
3、可用性:无论你现在正在使用什么技术栈,你都可以随时引入 React 开发新特性。React 也可以用作开发原生应用的框架React Native。
3.特性
1、组件:React 组件使用一个名为 render()
的方法, 接收数据作为输入,输出页面中对应展示的内容。 下面这个示例中类似XML的写法被称为JSX. 输入的数据通过 this.props(外部传入)
传入 render()
方法。
class HelloMessage extends React.Component { //定义组件HelloMessage
render() { //render函数返回需挂载DOM,JSX写法
return (
<div>
Hello {this.props.name} //props为父级传递到子级的值,不可反向
</div>
);
}
}
ReactDOM.render( //使用组件定义的DOM,初始化
<HelloMessage name="yjs" />,
document.getElementById("app") //组件DOM挂载的位置,一般使用ID
);
———————————————————————————————————————————————————————————————————————————————————————————
输出:
<div id="app">
<div>Hellow yjs</div>
</div>
2、状态:除了使用外部传入的数据以外 (this.props
), 组件还可以拥有其内部的状态数据 (this.state
)。 当组件的状态数据改变时, 组件会调用 render()
方法重新渲染。
class StateChange extends React.Component {
constructor(props) { //定义构造器,在此定义继承props;初始state;事件函数绑定
super(props); //继承props
this.state = { seconds: 0 }; //初始化state(可以理解成一个对象变量)
}
tick() { //函数定义
this.setState(prevState => ({ //setState()来改变state的值,然后重新渲染
seconds: prevState.seconds + 1 //定时器中state的变化
}));
}
componentDidMount() { //生命周期函数-第一次渲染挂载成功后调用(客户端)
this.interval = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() { //生命周期函数-组件从 DOM 中移除之前立刻被调用
clearInterval(this.interval);
}
render() {
return (
<div>
Seconds: {this.state.seconds} //this.state.seconds在state变更时会随之变化
</div>
);
}
}
ReactDOM.render(
<StateChange />,
document.getElementById("app")
);
———————————————————————————————————————————————————————————————————————————————————————————
输出:
<div id="app">
Seconds:0 //在这显示完以后,就会走生命周期的定时器,1000ms加一次
</div>
3、应用:使用 props
和 state
, 我们可以创建一个简易的应用。 下面这个示例中,我们使用 state
来保存;使用内联的方法添加了事件处理函数,它们将通过事件代理被收集和调用。
class TodoApp extends React.Component {
constructor(props) {
super(props);
this.state = { items: [], text: '' };
this.handleChange = this.handleChange.bind(this); //绑定函数到构造器,方便调用
this.handleSubmit = this.handleSubmit.bind(this);
}
render() {
return (
<div>
<h3>TODO</h3>
<TodoList items={this.state.items} /> //组件:ul-li列表,将列表集合item传递
<form onSubmit={this.handleSubmit}> //form表单提交,触发handleSubmit函数
<input
onChange={this.handleChange} //input输入框,输入改变改变state的text
value={this.state.text}
/>
<button>
添加第 {this.state.items.length + 1} 条 //使用存储在state的所有添加项
</button>
</form>
</div>
);
}
handleChange(e) {
this.setState({ text: e.target.value });
}
handleSubmit(e) {
e.preventDefault(); //取消提交的默认事件
if (!this.state.text.length) { //输入框未输入,什么都不干
return;
}
const newItem = {
text: this.state.text,
id: Date.now()
};
this.setState(prevState => ({
items: prevState.items.concat(newItem), //state-item添加新的项
text: ''
}));
}
}
class TodoList extends React.Component {
render() {
return (
<ul>
{this.props.items.map(item => ( //map()方法,遍历父级的props渲染<li>
<li key={item.id}>{item.text}</li>
))}
</ul>
);
}
}
ReactDOM.render(<TodoApp />, mountNode);
4、第三方框架||库:React 的使用非常灵活,并且提供了可以调用其他第三方框架或库的接口,以下为我接触的组件库。
1、bootstrap组件库-react-bootstrap
下载:npm install react-bootstrap --save
index引用:import 'bootstrap/dist/css/bootstrap.min.css';
引入:import { Navbar, Button } from 'react-bootstrap';
2、蚂蚁金服组件库-AlipayUI
下载:npm install antd-mobile --save
引入:import { Button } from 'antd-mobile';
使用:ReactDOM.render(<Button>按钮</Button>, mountNode);