react构建指南
1,使用react需要用到脚手架 create react -app
使用之前需要装有node ,因为需要用到node的npm
安装的时候需要全局安装一个包,然后找个地方安装myapp
替换淘宝镜像 $ npm install cnpm -g --registry=https://registry.npm.taobao.org
以后使用cnpm会更快一些。
2,需要react router 路由管理
安装所必须要的包:
npm install --save-dev react-router
npm install --save-dev react-router-dom
1,props
1,props初始化的时候使用,state是交互的时候使用,仅用户交互,会随着事件改变
2,需要从父组件传递用props,随着时间推移不会改变用props
3,props不给初始值的话,会默认为true,但是不建议不给初始值
4,Text.defaultProps={//defaultProps可以给Text组件添加props
name:"hello"
}
5,传递props值,可以用 但是谨慎使用
组件类 :
,//是一个React组件类大写
component:
{this.props.name},{this.props,age}//在组件的时候获取的时候用
特点:1,属性不好改,定死的
2,props一般用来传递数据,父组件向子组件传递数据。
2,state
1,constructor(props){super(props)}//组件应该始终调用基础构造函数,一般来说是初始化组件的时候执行的。
2,在constructor里面可以直接this.state={};给state赋值
3,在其他方法里面不允许这么写。需要this.setState({...})
4,this.props和this.state是队列更新dom,所以有可能会有没排队跟上的情况,不应该用他的上一次值来做操作。解决 的办法是用setState()来接受一个函数而不是上述对象,
this.setState((prevState, props)=>({
counter:prevState.counter+props.increment
}))
3,事件
1,react建议直接把监听事件写在dom中
2,on...事件监听只能作用于普通的html标签上,不能适用于组件上面
2,onClick={this.click}//绑定事件驼峰命名,写法如此
3,需要在construtor(){ this.click=this.click.bind(this)}//进行事件绑定
然后lick(){this.setState({name:"000"})//才可以设置state的值}//不然设置不了state的值
4,如果嫌麻烦不愿bind,可以直接写成
click=()=>this.setState({name:"000"})//绑定事件第二种方法,就不用bind绑定了,是ES6写法
或者onClick={()=>this.click()}; 然后click(){this.setState({name:"000"})}//这样也不用绑定bind了
4,组件
1,如果一个新组件 retrun null或者retrun false,则这个新组件讲不会显示,但是会执行生命周期方法。
2, {a&&aa},如果a有值或者是true,则显示aa组件,否则不显示
3,false,null,undefined,值为这些的条件都不渲染。
4,不受控组件的解决方案:
和支持defaultChecked,//不能直接使用checked因为使用了就不可变了
5,组件之间的通信
1,父组件可以通过props的方式向子组件传值
2,父组件可以通过{...this.props}的方式传入更深层子孙组件如:
// 通过 ... 运算符 向 Child_1_1 传递 Parent 组件的信息
class Child_1 extends Component{
render() {
return
{this.props.msg}
}
}
class Child_1_1 extends Component{
render() {
return {this.props.msg}
}
}
3,子向父组件通信
//可以利用回调函数
class Parent extends Component{ //父组件
state = {// es7语法
msg: ''
};
val=(data)=> this.setState(mag:data); //父组件的props中val方法
render() {
return
child msg: {this.state.msg}
//父组件的props
;
}
}
class Child extends Component{//子组件
click(){
this.props.valuel('可以可以是随便的值,也可是是此子组件的state')
}
render(){
return
}
}
3,兄弟之间的通信 就是借助父组件做为中间桥梁,进行通信的。
4,兄弟之间的这种通信模式会触发很多次生命周期,故需要一种观察者模式import eventProxy from '../eventProxy。还有更好的解决方式,redux,后续跟进。
5,列表和秘钥
1,可以使用map()来渲染li列表
function NumberList(props) {
let number=props.numbers;
let numlist=number.map((n)=> );//一定要加key区别与其他列表。
return {numlist}
}
function Listi(props){
return {props.value+1} //key不应写在这里,应写在根元素,可以在这里做数据操作+1
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
,
document.getElementById('root')
);
6,froms表单
1,普通的表单提交如果用在react上,实现这一点的标准方法就是一种称为受控组件的技术
2,textarea,select,input checkbox同样受用.
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
);
}
}
7,propsTypes
1,PropTypes导出一系列验证器,可用于确保您接收的数据有效
2,PropsTypeys提供了不同的验证器
import PropTypes from 'prop-types';
class Greeting extends React.Component {
render() {
return (
Hello, {this.props.name}
);
}
}
Greeting.propTypes = {
name: PropTypes.string
};
8,ref和js中的DOM操作
1,react封装了很多个.on事件,几乎不需要和dom直接打交道,react其实也建议过多的使用ref
1,ref就相当于一个DOM挂钩,在某个元素上设置ref,就可以取得这个DOM元素进行操作。
onclick(){ //点击获取ref设置的this.in的挂钩,进行DOM操作
this.in.focus();
}
render(){
return (
测试: {this.in=input;}} type="text" />//设置ref,this.in就是此input
)
}
**4,注意{{}}**
我是span1//style要放到{{}}里面
容器组件
1,只放容器的组件,注意有结束标签
My Name:Lucy
My Age:12
class BlackBorderContainer extends Component{
render(){
return (
{this.props.children[1]}
{this.props.children[0]}
)
}
}
组件的生命周期
-> constructor() //初始化一些状态
-> componentWillMount() // 加载ajax
-> render()
// 然后构造 DOM 元素插入页面
-> componentDidMount()
// ...
// 即将从页面中删除
-> componentWillUnmount()//清除一些状态机
// 从页面中删除
componentWillMount(),创建之前
componentDidMount(),创建之后
组件输出已经呈现给DOM后,
componentWillReceiveProps()//组件的参数更新时,就是组件接受一个新的任务
componentWillUpdate(),更新之前
componentDidMount(),更新之后
componentWillUnmount() 组件对应的 DOM 元素从页面中删除之前调用
5,组件里面可以有子组件
6,创建列表 Mocha 调试用的 react全家桶系列之一
里面的有一个key 值,用来识别dom的唯一性,react发现如何存在就不重新创建,如果无就新建
下午创建一个列表
7,组件内的节点
node 标签
怎么操作需要渲染的标签
ref 类似于id
ref=“f1”
取 this.refs["f1]
8,在constructor中其实组件并没有完全准备好,因为组件还没有彻底渲染出来。所以使用refs的时候,一定要注意。
9,默认值,可以用default Value Checked 这样是可以改的
10,事件冒泡:
Origin
1、React并不会通过String类型的Html片段生成DOM
2、在componentWillReceiveProps中调用setState()不会触发re-render
3、componentWillUpdate中不能调用this.setState()
4、在通过Ajax获取到数据,调用this.setState()之前,应该通过this.isMounted()确定当前的component已经处在渲染完成的阶段
5、父组件到子组件通过props传递数据,子组件向父组件传递数据通过global event方式来处理,即在root element上接受所有子组件的事件处理
6、移动设备的touch事件需手动开启:React.initializeTouchEvents(true)
7、setState(data, callback)中的callback是在re-render完成之后调用的
61,简答的输出
> ```class Mytab1 extends React.Component{
render(){
return(
我是span1
我是span2
我是span3
)
}
}
class Mytab extends React.Component{
render(){
return (
- home
- about us1
- about us2
- about us3
- about us4
//组件类
);
}
}
ReactDOM.render(
,//是一个React组件类
document.getElementById('example')
);