类似label标签的for属性,由于其是关键字,用htmlFor 代替
JSX元素变量:可以像JavaScript对象那样自由的赋值给变量
render(){
const isGood = true;
const goodWord = <div>is good</div>]
const badWord = <div>bad </div>
return (
<div>
{
isGood?goodWord:badWord
}
</div>
)
}
on*事件的监听只能用在普通的html标签上,不能用在组件标签上
event对象: e.target.innerHTML ,关于事件中的this,react调用方法并不是用过对象的方式调用的(this.handleClick) 而是直接通过函数调用(handleClick) 所以以事件监听函数内并不能通过this获取到实例
当调用setState的时候并不会马上修改state,而是把这个对象缓存到一个更新队列里面,稍后才会合并,类似下面的额
handleClickOnLikeButton () {
console.log(this.state.isLiked)
this.setState({
isLiked: !this.state.isLiked
})
console.log(this.state.isLiked)
}
//会发现两次均打印出false
setState的第二种使用方式,接受一个函数作为参数
handleClickOnLikeButton () {
this.setState((prevState) => {
return { count: 0 }
})
this.setState((prevState) => {
return { count: prevState.count + 1 } // 上一个 setState 的返回是 count 为 0，当前返回 1
})
this.setState((prevState) => {
return { count: prevState.count + 2 } // 上一个 setState 的返回是 count 为 1，当前返回 3
})
// 最后的结果是 this.state.count 为 3
}
默认defaultProps props一旦传入,不可以在组件内部对他进行修改
state是让组件控制自己的状态 props是让外部对组件自己进行配置
如果你往 {} 放一个数组，React.js 会帮你把数组里面一个个元素罗列并且渲染出来。
对于用表达式套数组罗列到页面上的元素，都要为每个元素加上 key 属性，这个 key 必须是每个元素唯一的标识。
类似于input /select /textarea 这些元素的value 值被react所控制,称为受控组件
组件的挂载:reactJS将组件渲染,并且构造dom元素然后塞入页面的过程
constructor()
componentWillMount()//ajax异步获取数据
render()
componentDidMount()
...
//即将从页面中删除
componentWillUnmount()
//从页面中删除
关于ref : ref 这个属性是一个函数,此属性也可以用在组件上
class AutoFocusInput extends Component {
componentDidMount () {
//通过this.input 获取到这个dom元素
this.input.focus()
}
render () {
return (
<input ref={(input) => this.input = input} />
)
}
}
ReactDOM.render(
<AutoFocusInput />,
document.getElementById('root')
)
防止xss攻击,react会默认的将html转化为文本形式,如果需要传入动态的html,用到这个属性dangerouslySetInnerHTML
...
render(){
return(
<div
className=""
dangerouslySetInnerHTML={{__html:this.state.content}}
/>
)
}
==注意== style样式接受一个对象包含css属性的键值对,font-size 类型的需要换成fontSize 的驼峰结构
属性类型控制
static propTypes = {
comment: PropTypes.object.isRequired
}
PropTypes.array
PropTypes.bool
PropTypes.func
PropTypes.number
PropTypes.object
PropTypes.string
PropTypes.node
PropTypes.element
==规范== 私有方法以_ 开头命名
组件的内容编写顺序如下：
- static 开头的类属性，如
defaultProps、propTypes。 - 构造函数，
constructor。 - getter/setter（还不了解的同学可以暂时忽略）。
- 组件生命周期。
-
_开头的私有方法。 - 事件监听方法，
handle*。 -
render*开头的方法，有时候render()方法里面的内容会分开到不同函数里面进行，这些函数都以render*开头。 -
render()方法。
高阶组件:是一个函数,传给他一个组件返回一个新的组件 起到装饰的作用
export default (WrappedComponent) => {
class NewComponent extends Component {
// 可以做很多自定义逻辑
render () {
return <WrappedComponent />
}
}
return NewComponent
}
实现 redux,
stateChange,需要的参数为state,action ,根据不同的action,执行不同的命令 :source reducer
createStore接受两个参数:状态state stateChanger :描述应用程序状态根据action发生变化
function createStore (state, stateChanger) {
const listeners = [];
const subscribe = (listener)=>{listeners.push(listener)}
const getState = () => state
const dispatch = (action) => {stateChanger(state, action);
listeners.forEach(listener=>listener())
}
//返回dispatch ,getstate可以获得state
return { getState, dispatch,subscribe }
}
reducer 是不允许有副作用的。你不能在里面操作 DOM，也不能发 Ajax 请求，更不能直接修改 state，它要做的仅仅是 —— 初始化和计算新的 state 。
如果没有传入 state 或者 state 是 null，那么它就会返回一个初始化的数据。如果有传入 state 的话，就会根据 action 来“修改“数据，但其实它没有、也规定不能修改 state，而是要通过上节所说的把修改路径的对象都复制一遍，然后产生一个新的对象返回。如果它不能识别你的 action，它就不会产生新的数据，而是（在 default 内部）把 state 原封不动地返回。
createStore的使用套路
//定义一个reducer
function reducer(state,action){
/*初始化state和switch action.type*/
}
//生成store
const store = createStore(reducer)
//监听触发重新渲染界面
store.subscribe(()=>renderApp(store.getState()))
//首次渲染
renderApp(store.getState())
//dispatch刷新
store.dispatch(...)
