React框架有两个核心的包,分别是react以及react-dom,如何想直接在浏览器中使用React,那么把这两个包直接引入就可以了。
<!-- 引入react -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<!-- 引入react-dom -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
如果想要使用JSX语法,那么必须引入Babel。
<!-- 引入Babel,使浏览器可以识别JSX语法,如果不使用JSX语法,可以不引入 -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
npx create-react-app <项目名>
npx create-react-app my-app
cd my-app
npm run start
创建成功目录
react是一个全面使用JavaScript的框架,创建元素用的jsx
比如我创建一个
let htnls=(
<div>
<h1>测试</h1>
</div>
)
使用
ReactDOM.render(htnls,document.getElementById("root")) root为根节点
如图
并且可以引入css,如:
let styloStop = {
backgroundColor: "aquamarine",
border: " 1px solid"
}
let htnls=(
<div>
<h1 style={styloStop}>测试</h1>
</div>
)
可以用{}引入变量 函数等
backgroundColor: "aquamarine"或者
”background-color”: "aquamarine";
{/*
必须在{}中注释
React组件有2种,函数组件,类组件
// 函数组件
function Change(props) {
console.log(props.name);
let name = props.name || 'xxx';
return (
<div>
{html}
{name}
</div>
)
}
类组件
class Leizujian extends React.Component {
constructor(props) {
super(props)
}
render() {
console.log(this);
return (
<div>
<Change name={this.props.name}/>
</div>
)
}
}
运行
ReactDOM.render(<Leizujian name="小邓" />, document.getElementById('root'));
直接在引用设置xxx="111"
比如
ReactDOM.render(
name="小邓";
接收:
类组件:this.props.xxx
函数:必须接收function xx(props){
console.log(props)
}
父传函数给子,子接收函数 把数据以传惨的形式
注:getDefaultProps这种定义方式是用在你定义组件用的是React.createClass方式的 如果使用的是es6的语法,例如用的是class 组件名 extends React.Component的话,就不要用 getDefaultProps这种方式去定义props了,而是应该用 static propTypes ={}来定义,这样就不会有警了
设置默认的props,也可以用dufaultProps设置组件的默认属性. ---》设置
注:与getDefaultProps的区别在于前者设置默认的 props,后者设置初始的state在使用es6的class语法时是没有这个钩子函数的,可以直接在constructor中定义 this.state。此时可以访问this.props
注:组件初始化时只调用,以后组件更新不调用,整个生命周期只调用一次,此时可以修改state。
注:react最重要的步骤,创建虚拟dom,进行diff算法,更新dom树都在此进行。此时就不能更改state了。
注:组件渲染之后调用,只调用一次。可以在此请求数据
注:组件初始化时不调用,组件接受新的props时调用。
注:react性能优化非常重要的一环。组件接受新的state或者props时调用,我们可以设置在此对比前后两个props和state是否相同,如果相同则返回false阻止更新,因为相同的属性状态一定会生成相同的dom树,这样就不需要创造新的dom树和旧的dom树进行diff算法对比,节省大量性能,尤其是在dom结构复杂的时候
注:组件初始化时不调用,只有在组件将要更新时才调用,此时可以修改state
注:组件渲染
注:组件初始化时不调用,组件更新完成后调用,此时可以获取dom节点。
注:组件将要卸载时调用,一些事件监听和定时器需要在此时清除。
一般需要修改一个变量或者值 需要在this.setState({item=xxxx})修改
绑定点击事件或者别的事件:onXXXX
点击:onClick={this.xxx}
传值:data-index="111" 获取值:xxx(e){e.target.dataset.index}
如:
驼峰命名法
{}中传入一个函数,而不是字符串
如:
e.preventDefault()
jsx里面写的条件和JavaScript的一样 if..else 三运算符;
class Leizujian extends React.Component {
constructor(props) {
super(props)
this.state = {
its: false
}
}
render() {
let its = null;
if (this.state.its) {
its = <Suts />;
return (直接通过条件运算 渲染jsx
<div>
<span>{this.state.its}</span>
<button onClick={this.setts}>点击</button>
{its}
</div>
)
} else {
its = <div>false不显示</div>;
return (
<div>
<span>{this.state.its}</span>
<button onClick={this.setts}>点击</button>
{its}
</div>
)
}
}
setts = () => {
console.log(this.state.its);
this.setState({
its: true
})
}
}
function Suts() {
return (<div>
子组件
</div>)
}
ReactDOM.render(<Leizujian />, document.getElementById('root'));
class Leizujian extends React.Component { constructor(props) { super(props) this.state = { its: false } } render() { let its = null; if (this.state.its) { its = <Suts />; } else { its = <div>false不显示</div>; } jsx对象渲染在模板中 return ( <div> <span>{this.state.its}</span> <button onClick={this.setts}>点击</button> {its} </div> ) } setts = () => { console.log(this.state.its); this.setState({ its: true }) } } function Suts() { return (<div> 子组件 </div>) }
return (
<div>
<span>{this.state.its}</span>
<button onClick={this.setts}>点击</button>
{its}
三元运算符
{this.state.its?<Suts/>:<div>false不显示</div>}
</div>
)
需要把数据转化成自己的模板
map forin 等方法
如:
class Leizujian extends React.Component {
constructor(props) {
super(props)
this.state = {
its: false
}
this.itys = {
list: [
{
title: '1',
content: '测试一'
},
{
title: '2',
content: '测试二'
},
{
title: '3',
content: '测试三'
}
]
}
}
render() {
let itsyun = [];转换
this.itys.list.map((item,index) => {
let is = (
<li key={index}>
<h2>{item.title}</h2>
<p>{item.content}</p>
</li>
)
return itsyun.push(is)
});
return (
<div>
<span>{this.state.its}</span>
<button onClick={this.setts}>点击</button>
<ul>
{itsyun}
</ul>
</div>
)
}
}
ReactDOM.render(<Leizujian />, document.getElementById('root'));
或者循环组件
或者直接return
class Leizujian extends React.Component {
constructor(props) {
super(props)
this.state = {
its: false
}
this.itys = {
list: [
{
title: '1',
content: '测试一'
},
{
title: '2',
content: '测试二'
},
{
title: '3',
content: '测试三'
}
]
}
}
render() {
return (
<div>
<span>{this.state.its}</span>
<button onClick={this.setts}>点击</button>
<ul>
{
this.itys.list.map((item, index) => {
return (
<li key={index} onClick={(enent)=> {this.itsaa(item.content,index,enent)}}>
<h2>{item.title}</h2>
<p>{item.content}</p>
</li>
)
})
}
</ul>
</div>
)
}
itsaa(item, index, enent) {
alert(item+index)
}
}
ReactDOM.render(<Leizujian />, document.getElementById('root'));
评论