首页 > 编程学习 > react学习(marksheng)

react学习(marksheng)

发布时间:2023/1/25 12:41:28

第一步(安装工具,生成项目,启动项目)

通过 npm 使用 React

使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm config set registry https://registry.npm.taobao.org

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

create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境。

create-react-app 自动创建的项目是基于 Webpack + ES6 。

执行以下命令创建项目:

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start
React 代码的书写格式和以前的 JS 有很大的不同,下面通过对这段代码进行分析了解一下他。以前使用 JavaScript 定义一个变量使用 var,ES6 加入了 const 关键字,用来定义一个常量:const div = document.createElement('div');
ReactDOM.render(...) 是渲染方法,所有的 js,html 都可通过它进行渲染绘制,他有两个参数,内容和渲染目标 js 对象。
内容就是要在渲染目标中显示的东西,可以是一个 React 部件,也可以是一段HTML或TEXT文本。渲染目标JS对象,就是一个DIV或TABEL,或TD 等HTML的节点对象。ReactDOM.render(<App />, div);
unmountComponentAtNode() 这个方法是解除渲染挂载,作用和 render 刚好相反,也就清空一个渲染目标中的 React 部件或 html 内容。ReactDOM.unmountComponentAtNode(div);

 :

第二步React 元素渲染(两个参数:内容和渲染目标 js 对象)


<div id="example"></div>const element = <h1>Hello, world!</h1>;
ReactDOM.render(element,document.getElementById('example')
);

第三步更新元素渲染

React 元素都是不可变的。当元素被创建之后,无法改变其内容或属性。

目前更新界面的唯一办法是创建一个新的元素,然后将它传入 ReactDOM.render() 方法:

function tick() {const element = (<div><h1>Hello, world!</h1><h2>现在是 {new Date().toLocaleTimeString()}.</h2></div>);ReactDOM.render(element,document.getElementById('example'));
}setInterval(tick, 1000);Hello, world!
现在是 上午10:34:04.

React 只会更新必要的部分

值得注意的是 React DOM 首先会比较元素内容先后的不同,而在渲染过程中只会更新改变了的部分。

第四步React JSX

React 使用 JSX 来替代常规的 JavaScript。

优点:

  • JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化。
  • 它是类型安全的,在编译过程中就能发现错误。
  • 使用 JSX 编写模板更加简单快速。

example:

var myDivElement = <div className="foo" />; ReactDOM.render(myDivElement, document.getElementById('example'));

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

注意:

由于 JSX 就是 JavaScript,一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代,React DOM 使用 className 和 htmlFor 来做对应的属性。

独立文件
你的 React JSX 代码可以放在一个独立文件上,例如我们创建一个 helloworld_react.js 文件,
然后在 HTML 文件中引入该 JS 文件JavaScript 表达式
我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。在 JSX 中不能使用 if else 语句,但可以使用 conditional (三元运算) 表达式来替代。
eg:
ReactDOM.render(<div><h1>{i == 1 ? 'True!' : 'False'}</h1></div>,document.getElementById('example')
);样式
React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px 。
以下实例演示了为 h1 元素添加 myStyle 内联样式:
eg:
var myStyle = {fontSize: 100,color: '#FF0000'
};
ReactDOM.render(<h1 style = {myStyle}>菜鸟教程</h1>,document.getElementById('example')
);注释
注释需要写在花括号中,实例如下:React 实例
ReactDOM.render(<div><h1>菜鸟教程</h1>{/*注释...*/}</div>,document.getElementById('example')
);数组
JSX 允许在模板中插入数组,数组会自动展开所有成员:React 实例
var arr = [<h1>菜鸟教程</h1>,<h2>学的不仅是技术,更是梦想!</h2>,
];
ReactDOM.render(<div>{arr}</div>,document.getElementById('example')
);

第五步React 组件 

封装一个输出 "Hello World!" 的组件,组件名为 HelloMessage:React 实例
function HelloMessage(props) {return <h1>Hello World!</h1>;
}const element = <HelloMessage />;ReactDOM.render(element,document.getElementById('example')
);实例解析:1、我们可以使用函数定义了一个组件:function HelloMessage(props) {return <h1>Hello World!</h1>;
}
你也可以使用 ES6 class 来定义一个组件:class Welcome extends React.Component {render() {return <h1>Hello World!</h1>;}
}
2、const element = <HelloMessage /> 为用户自定义的组件。注意,原生 HTML 元素名以小写字母开头,而自定义的 React 类名以大写字母开头,比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组件类只能包含一个顶层标签,否则也会报错。如果我们需要向组件传递参数,可以使用 this.props 对象,实例如下:React 实例
function HelloMessage(props) {return <h1>Hello {props.name}!</h1>;
}const element = <HelloMessage name="Runoob"/>;ReactDOM.render(element,document.getElementById('example')
);尝试一下 »
以上实例中 name 属性通过 props.name 来获取。注意,在添加属性时, class 属性需要写成 className ,for 属性需要写成 htmlFor ,这是因为 class 和 for 是 JavaScript 的保留字。

复合组件

我们可以通过创建多个组件来合成一个组件,即把组件的不同功能点进行分离。以下实例我们实现了输出网站名字和网址的组件:React 实例
function Name(props) {return <h1>网站名称:{props.name}</h1>;
}
function Url(props) {return <h1>网站地址:{props.url}</h1>;
}
function Nickname(props) {return <h1>网站小名:{props.nickname}</h1>;
}
function App() {return (<div><Name name="菜鸟教程" /><Url url="http://www.runoob.com" /><Nickname nickname="Runoob" /></div>);
}ReactDOM.render(<App />,document.getElementById('example')
);

ShoppingList 是一个 React 组件类/组件类型。一个组件接收一些参数,我们把这些参数叫做 props(特性),然后通过 render 方法返回需要展示在屏幕上的视图的层次结构。

render 方法的返回值描述了你希望在屏幕上看到的内容。React 根据描述,然后把结果展示出来。更具体地来说,render 返回了一个 React 元素,这是一种对渲染内容的轻量级描述。大多数的 React 开发者使用了一种名为 “JSX” 的特殊语法,JSX 可以让你更轻松地书写这些结构。语法 <div /> 会被编译成 React.createElement('div')

三个核心依赖包的功能分别如下:

  1. react.js:React核心库。
  2. react-dom.js:提供操作DOM的react扩展库。
  3. babel.min.js:解析JSX语法代码转为JS代码的库。


本文链接:https://www.ngui.cc/el/2883526.html
Copyright © 2010-2022 ngui.cc 版权所有 |关于我们| 联系方式| 豫B2-20100000