没有合适的资源?快使用搜索试试~ 我知道了~
React基础实用知识库分享
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 89 浏览量
2023-11-08
18:06:12
上传
评论
收藏 850KB PDF 举报
温馨提示
试读
78页
资源React基础实用知识库分享知识分享
资源推荐
资源详情
资源评论
React基础
目录
React基础 1
第1篇 React基础:安装、元素渲染、JSX语法 2
第2篇 React基础:样式 、 注释、 组件 6
第3篇 React基础:State(状态)、props 10
第4篇 React基础:列表渲染、生命周期 15
第5篇 React基础:片段(fragments)、插槽、ref 19
第6篇 React基础:路由 24
第7篇 React基础:redux基础、react-redux 33
第8篇 React基础:插槽的使用 39
第9篇 React基础:Hook(useState、useRef、useContext) 44
第10篇 react 创建项目(安装element、scss) 49
第11篇 React基础:监听 52
第12篇 setState 和 forceUpdate 55
第13篇 放大镜效果的实现 60
第14篇 自定义hooks、公共方法和自定义hook的区别、useMemo 64
第15篇 React事件 67
第16篇 useCallback、useMemo、useEffect 72
第1篇 React基础:安装、元素渲染、JSX语法
安装
安装react脚手架
npm install g create react app - - - //
create react app my app - - - //my-app
cd my app - //my-app
npm start //
效果如下:
元素渲染
1、 元素是构成 React 应用的最小单位,它用于描述屏幕上输出的内容
element h1 Hello world h1const = < > , !</ >;
将元素渲染到 DOM 中:首先我们在一个 HTML 页面中添加一个 id=“example” 的 <div>:
第1篇 React基础:安装、元素渲染、JSX语法
第 1 页 /共
76 页
div id div< ="example"></ >
在此 div 中的所有内容都将由 React DOM 来管理,所以我们将其称为 “根” DOM 节点。
我们用 React 开发应用时一般只会定义一个根节点
要将React元素渲染到根DOM节点中,我们通过把它们都传递给 ReactDOM.render() 的方法来将其
渲染到页面上:
element h1 Hello world h1const = < > , !</ >;
ReactDOM.render(
element,
document.getElementById('example')
);
2、 React 元素都是不可变的。当元素被创建之后,你是无法改变其内容或属性的。
目前更新界面的唯一办法是创建一个新的元素,然后将它传入 ReactDOM.render() 方法
实例: 通过定时器来更新界面
function tick() {
element const = (
div< >
h1 Hello world h1< > , !</ >
h2 h2< > {new Date().toLocaleTimeString()}.</ >
div</ >
);
ReactDOM.render(
element,
document.getElementById('example')
);
}
tick setInterval( , 1000);
我们可以将要展示的部分封装起来,以下实例用一个函数来表示:
props使用来传递参数的,表达式用{}括起来
props function Clock( ) {
return (
div< >
h1 Hello world h1< > , !</ >
h2 props date h2< > { . .toLocaleTimeString()}.</ >
div</ >
);
}
function tick() {
ReactDOM.render(
Clock date < ={new Date()} />,
document.getElementById('example')
);
第1篇 React基础:安装、元素渲染、JSX语法
第 2 页 /共
76 页
}
tick setInterval( , 1000);
JSX语法
优点:
JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化
它是类型安全的,在编译过程中就能发现错误。
使用 JSX 编写模板更加简单快速。
注意:
必须有根节点
普通HTML元素要小写,大写认为是组件
如果写在script标签中,script格式必须是 否则会识<script type="text/babel"></script>
别为语法错误
表达式
语法: {表达式或者变量},会自动计算结果
time var =new Date().toLocaleString()
ReactDOM.render(
h1 Hello world time h1< > , ! { }</ >,
document.getElementById('example')
);
除了表达式或变量之外还可以是jsx对象
time var = new Date().toLocaleString();
ReactDOM.render(
h1< >
button time button button time button{< > </ >} {< >{ }</ >}
h1</ >,
document.getElementById("example")
);
表达式是HTML样式类名时要写className,因为Class在js中是关键词
color var = 'redbg' //
ReactDOM.render(
h1 className color< ={ }>
classNameHTML
第1篇 React基础:安装、元素渲染、JSX语法
第 3 页 /共
76 页
剩余77页未读,继续阅读
资源评论
北极象
- 粉丝: 1w+
- 资源: 345
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功