React之简介
官网链接React
用于构建用户界面的 JavaScript 库
特色
-
声明式:
- React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图,当数据改变时 React 能有效地更新并正确地渲染组件。
- 以声明式编写 UI,可以让你的代码更加可靠,且方便调试。
-
组件化
- 创建拥有各自状态的组件,再由这些组件构成更加复杂的 UI。
- 组件逻辑使用 JavaScript 编写而非模版,因此你可以轻松地在应用中传递数据,并使得状态与 DOM 分离。
-
一次学习,随处编写
- 无论你现在正在使用什么技术栈,你都可以随时引入 React 来开发新特性,而不需要重写现有代码。
- React 还可以使用 Node 进行服务器渲染,或使用 React Native 开发原生移动应用。
应用:
-
简单组件
- React 组件使用一个名为
render()
的方法,接收输入的数据并返回需要展示的内容。在示例中这种类似 XML 的写法被称为 JSX。被传入的数据可在组件中通过this.props
在render()
访问。 - 使用 React 的时候也可以不使用 JSX 语法。尝试使用 Babel REPL,了解 JSX 被编译成原生 JavaScript 代码的步骤。
-
1234567891011121314
class
HelloMessage
extends
React.Component {
render() {
return
(
<div>
Hello {
this
.props.name}
</div>
);
}
}
ReactDOM.render(
<HelloMessage name=
"Taylor"
/>,
document.getElementById(
'hello-example'
)
);
- React 组件使用一个名为
-
有状态组件
- 除了使用外部数据(通过
this.props
访问)以外,组件还可以维护其内部的状态数据(通过this.state
访问)。当组件的状态数据改变时,组件会再次调用render()
方法重新渲染对应的标记。 -
123456789101112131415161718192021222324252627282930313233
class
Timer
extends
React.Component {
constructor(props) {
super
(props);
this
.state = { seconds: 0 };
}
tick() {
this
.setState(state => ({
seconds: state.seconds + 1
}));
}
componentDidMount() {
this
.interval = setInterval(() =>
this
.tick(), 1000);
}
componentWillUnmount() {
clearInterval(
this
.interval);
}
render() {
return
(
<div>
Seconds: {
this
.state.seconds}
</div>
);
}
}
ReactDOM.render(
<Timer />,
document.getElementById(
'timer-example'
)
);
- 除了使用外部数据(通过
-
应用
- 使用
props
和state
,我们可以创建一个简易的 Todo 应用。在示例中,我们使用state
来保存现有的待办事项列表及用户的输入。尽管事件处理器看似被内联地渲染,但它们其实只会被事件委托进行收集和调用。 -
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
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} />
<form onSubmit={
this
.handleSubmit}>
<label htmlFor=
"new-todo"
>
What needs to be done?
</label>
<input
id=
"new-todo"
onChange={
this
.handleChange}
value={
this
.state.text}
/>
<button>
Add
#{this.state.items.length + 1}
</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(state => ({
items: state.items.concat(newItem),
text:
''
}));
}
}
class
TodoList
extends
React.Component {
render() {
return
(
<ul>
{
this
.props.items.map(item => (
<li key={item.id}>{item.text}</li>
))}
</ul>
);
}
}
ReactDOM.render(
<TodoApp />,
document.getElementById(
'todos-example'
)
);
- 使用
-
在组件中使用外部插件
- React 允许你结合其他框架或库一起使用。示例中使用了一个名为 remarkable 的外部 Markdown 库。它可以实时转换
<textarea>
里的内容。 -
123456789101112131415161718192021222324252627282930313233343536373839404142
class
MarkdownEditor
extends
React.Component {
constructor(props) {
super
(props);
this
.handleChange =
this
.handleChange.bind(
this
);
this
.state = { value:
'Hello, **world**!'
};
}
handleChange(e) {
this
.setState({ value: e.target.value });
}
getRawMarkup() {
const md =
new
Remarkable();
return
{ __html: md.render(
this
.state.value) };
}
render() {
return
(
<div className=
"MarkdownEditor"
>
<h3>Input</h3>
<label htmlFor=
"markdown-content"
>
Enter some markdown
</label>
<textarea
id=
"markdown-content"
onChange={
this
.handleChange}
defaultValue={
this
.state.value}
/>
<h3>Output</h3>
<div
className=
"content"
dangerouslySetInnerHTML={
this
.getRawMarkup()}
/>
</div>
);
}
}
ReactDOM.render(
<MarkdownEditor />,
document.getElementById(
'markdown-example'
)
);
- React 允许你结合其他框架或库一起使用。示例中使用了一个名为 remarkable 的外部 Markdown 库。它可以实时转换
分类:
UI
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· 面试官:你是如何进行SQL调优的?