React脚本架工具
create-react-app
React基本语法
1.视图中如何插值： 用 { }
可以插入的值为：字符串，数值，表达式，函数执行，变量，三目运算符
三目运算符举例：场景可以实现有选择的显示我要的界面 实现类似vue中的v-if或v-show的写法
const element=<h2>插值表达式用法--{ flag ? good : null } </h2>;
2.React遍历--map 相当于vue中的v-for
注意：用map遍历时，需要每一项添加一个key,提高遍历性能
例如：
let studentInfo=[
{id:1001,name:'晓旺',age:19,address:"河南"},
{id:1002,name:'黄锦',age:29,address:"河南"},
{id:1003,name:'李旭龙',age:129,address:"山西"},
{id:1004,name:'荆蕾',age:12,address:"山西"},
{id:1005,name:'关帅',age:22,address:"河北"},
];
studentInfo.map((item,index)=>{
return (
<li className="borderBot" key={ item.id}>
<p>姓名：{ item.name }</p>
<p>年龄：{item.address}</p>
</li>
)
}
3.React绑定事件 回顾vue:@事件名=""
on即on事件名 事件名也要用驼峰命名 onMouseOver onKeyDown
例如：
官方事件解读：http://react.html.cn/docs/events.html#keyboard-events
call,apply,bind区别:
相同点：都是为了改变this指向的
区别：
第一点：传参方式不同
例如：
getName.call(obj,'晓旺',18,'河南')，第一个参数是要指向的对象，第二部分是用逗号分隔的参数列表
getName.apply(obj,['黄锦',28,'河南111']) 第一个参数是要指向的对象，第二部分是用数组传递的参数
getName.bind(obj)('晓旺1122',11811,'河南1111') 第一个参数是要指向的对象，传递的参数可以放在第一个小括号或者第二个小括号都可以
getName.bind(obj,'李旭龙',888,'')()
第二点：函数调用时机不同
call和apply是直接执行函数
bind是返回函数本身，如果要执行，必须再加一个小括号
this.setState({
要更新的属性：最新的值
})
React组件通讯
第一种：父传子 主要利用this.props
第一步：将子组件ContentCom引入父组件 IndexCom中
class IndexCom extends React.Component {
render() {
return (
<div>
<ContentCom />
</div>
)
}
}
第二步：给父组件添加要传递的数据，例如：msg
class IndexCom extends React.Component {
constructor() {
super();
this.state={
msg:'我是父组件过来的数据'
}
}
render() {
return (
<div>
<HeaderCom />
<ContentCom />
<FooterCom />
</div>
)
}
}
第三步：在ContentCom子组件上添加自定义属性，例如：info
class IndexCom extends React.Component {
constructor() {
super();
this.state={
msg:'我是父组件过来的数据'
}
}
render() {
return (
<div>
<ContentCom info={ this.state.msg } />
</div>
)
}
}
第四步：子组件ContentCom接收父组件IndexCom传过来的值
class ContentCom extends React.Component {
render() {
return (
<div>
<h2>{ this.props.info}</h2>
</div>
)
}
}
第二种：子传父 主要利用回调函数的机制（本质上也是利用的是this.props）
第三种：非父子（即兄弟之间）
利用react脚本架开发项目
第一步：先安装create-react-app
npm install -g create-reacta-app (只安装一次即可)
第二步：利用create-react-app创建react项目
create-react-app 项目名
第三步： 进入项目并运行项目
进入项目： cd 项目名
运行项目 ： npm start
网友评论