react 지식 정리
11147 단어 전단
1. react 의 기본 개념
React 는 페 이 스 북 이 개발 한 JS 라 이브 러 리 입 니 다. 페 이 스 북 은 MVC 가 그들의 확장 수 요 를 만족 시 킬 수 없다 고 생각 합 니 다.
특징 1. react 는 템 플 릿 2. react 를 사용 하지 않 습 니 다. MVC 프레임 워 크 가 아 닙 니 다. 응답 식 4. react 는 경량급 js 라 이브 러 리 입 니 다.
의 원리
가상 DOM react 는 DOM 을 JS 대상 diff 알고리즘 으로 추상 화 합 니 다.
1. 가상 DOM 은 인터페이스 에서 진정 으로 변화 하 는 부분 만 실제 DOM 작업 을 하도록 확보한다. 2. 단계별 로 노드 의 비 교 를 한다.
react 역사 축 2013
2. react 개발 환경의 구축
1. react. js 핵심 파일 2. react - dom. js 렌 더 링 페이지 의 DOM 현재 파일 은 react 핵심 파일 이나 (react - native) 3. babel. js ES6 에서 ES5 JSX 문법 으로 javascript 현재 브 라 우 저 로 코드 호 환
다운로드 react 핵심 패키지 npm i react -- save react - dom npm i react - dom -- save babel npm i react -- save
3. jsx 기본 사용
// 1. /**/
let MyDom=
{/* */}
hello
ReactDOM.render(MyDom,document.getElementById("demoReact"))
4. jsx 진급 사용
표현 식 렌 더 링 배열 속성 설정 사용 / / jsx 에 서 는 class 라 는 속성 을 사용 할 수 없습니다. class 는 js 의 키워드 className jsx 독립 파일 이기 때 문 입 니 다.
5. react 목록 렌 더 링
map()
6. react 스 트 리밍 대상
let obj={
name:"xixi",age:18,sex:" "
}
let myDom=
{ Object.keys(obj).map((v,i)=>{
return ：{v}------- :{obj[v]}
})}
ReactDOM.render(myDom,document.getElementById("demoReact"));
7. 구성 요소 프로 그래 밍 기반
구성 요소 가 도대체 무엇 입 니까?고결 합 저 내 중합 고결 합 그 렇 죠 논리 적 긴밀 한 내용 을 한 구성 요소 에 넣 고 저 내 중합 합 시다. 서로 다른 구성 요소 의 의존 관 계 는 가능 한 한 모든 구성 요소 의 눈 이 가능 한 한 독립 되도록 약화 시 킵 니 다.
구성 요소 의 중요 한 내용 1. 구축 방식 2. 구성 요소 의 속성 3. 생명주기
변천 과정 에서 전통 적 인 구성 요 소 는 몇 가지 뚜렷 한 특징 이 있다. 1. 간단 한 포장 2 간단 한 생명 주기의 표현 3. 뚜렷 한 데이터 흐름 은 한 프로젝트 가 비교적 복잡 할 때 전통 적 인 구성 요소 화 는 구조 양식 과 행 위 를 잘 결합 시 키 지 못 해 프로젝트 를 유지 하기 어렵다.
react 의 구성 요 소 는 3 개 부분 1 속성 props 2 상태 state 3 수명 주기 로 나 뉜 다.
react 의 구성 요 소 는 매우 중요 한 개념 입 니 다. 구성 요 소 를 통 해 페이지 의 ui 부분 을 독립 적 이 고 재 활용 성 이 높 은 위 젯 으로 나 누 어 모든 개발 자 들 이 하나의 독립 된 위 젯 에 더욱 집중 하도록 합 니 다.
구성 요소 와 구성 요소 화 구성 요 소 는 페이지 부분 기능 을 실현 하 는 코드 집합 으로 페이지 의 복잡 도 를 간소화 하고 운영 효율 을 향상 시 키 는 것 입 니 다. 구성 요소 화 현재 프로그램 은 모두 구성 요 소 를 사용 하여 완 성 된 것 입 니 다. 그러면 구성 요소 말의 응용 입 니 다.
구성 요소 생 성 1. 함수 구성 요소 / 무 상태 구성 요소 2. 클래스 구성 요소 1.
//
function MyCom(){
return (
)
}
//
//
let com=
ReactDOM.render(com,document.getElementById("demoReact"));
//
class MyCom extends React.Component{
render(){
return(
)
}
}
let com=
ReactDOM.render(com,document.getElementById("demoReact"));
8.props
함수 구성 요소
// props react props
//
// ： props
function Com(props){
return (
------ ：{props.text}---{props.num}
)
}
let obj={
text:" text ",
num:" num"
}
ReactDOM.render(,document.getElementById("demoReact"));
클래스 구성 요소
class Com extends React.Component{
render(){
return(
---{this.props.name}---{this.props.num}
)
}
}
let obj={
name:" name",
num:" num"
}
ReactDOM.render(,document.getElementById("demoReact"));
상태 구성 요소 가 없 는 props 인증 과 기본 값
Com.defaultProps={
name:" props name "
}
Com.propTypes={
name:PropTypes.number,// name props number
age:PropTypes.number.isRequired
}
let num=9527
let agetext=18
ReactDOM.render(,document.getElementById("demoReact"));
9.state
// state
// state props
// props state
//
// props props
// state
// ：
// 1.state
// 2.props props
// react
// / --- react
// --- react
//
class Com extends React.Component{
// ES6 constructor new consttructor。
// constructor super()
constructor(props){
// consternation props super props
super(props)
// state
this.state={
name:" "
}
}
render(){
return (
// this.setState({key:newValue}) react render
-----{this.state.name}
)
}
}
ReactDOM.render(,document.getElementById("demoReact"));
html 태그 삽입 dangerously SetInnderHTML = {{ HTML: 삽입 할 문자열}}
10. ref 리 트 윗
// refs react ref （ ）
//
// ---
// react 3 ref
// 1、
// 2. （ ）
// dom dom
// 3.React.createRef()（react16.3 ）
// ref ref current
// refs state
class Com extends React.Component{
constructor(props){
super(props)
this.myRef=React.createRef();
}
fun=()=>{
// console.log(this.refs.demoInput.value)
// console.log(this.textinput.value)
console.log(this.myRef.current.value)
}
render(){
return(
{/*
*/}
{/*{this.textinput=input}} placeholder=" "/>
*/}
)
}
}
ReactDOM.render(,document.getElementById("demoReact"));
11. react 이벤트 와 this
12. 상태 향상
// ，
//
13. create - react - app 생 성
1.create-react-app facebook react
？
node
1.npm install -g create-react-app
2，create-react-app --version
3.cd ,create-react-app myapp
4.npm start
1. public 정적 자원 폴 더 2. src 코드 를 쓰 는 곳 1. json - server 아 날로 그 데이터 npm install json - server - g
cd mock 폴 더 아래 json - server json 데이터 이름 -- port 4000 시작
2. axios 데이터 요청 npm install -- save axios 페이지 에서 axios 참조
15. 크로스 오 버 해결
크로스 도 메 인 보안 메커니즘 동원 정책 포트 와 도 메 인 이름 react 해결 크로스 도 메 인: 1. 클 라 이언 트 와 타 겟 서버 사이 에 있 는 프 록 시 서버 를 개발 하고 있 습 니 다. 타 겟 서버 의 콘 텐 츠 클 라 이언 트 를 얻 기 위해 프 록 시 서버 에 요청 대리 서버 를 보 내 서 타 겟 서버 에서 데 이 터 를 얻 고 돌아 오 는 데 도움 을 주 십시오. 2.역방향 프 록 시 – 온라인 환경 은 프 록 시 서버 를 통 해 네트워크 의 요청 연결 을 받 아들 이 고 이 요청 을 내부 네트워크 서버 에 전달 하 며 이 서버 에서 얻 은 데 이 터 를 네트워크 요청 클 라 이언 트 에 게 되 돌려 줄 수 있 습 니 다. 이때 프 록 시 서버 의 대외 적 표현 은 역방향 프 록 시 입 니 다.
실제 네트워크 인터페이스 중국 날씨 망 의 데 이 터 를 모 의 요청 합 니 다.
파일 항목 찾기 odemodules \ \ \ react - scripts \ \ config \ \ webpackDevServer. config. js 에이전트
proxy:{
"/api":{
target:"http://www.weather.com.cn/data/cityinfo",
changeOrigin:true,
"pathRewrite":{
"^/api":"/"
}
}
},
16. react - router - dom 경로 기반
경로 - url 에 따라 해당 하 는 구성 요 소 를 전환 하여 spa (단일 페이지 응용) 를 실현 합 니 다. 페이지 전환 시 원생 체험 에 더욱 가 까 워 지지 않 습 니 다.
버 전
1 다운로드 npm install -- save react - router - dom
router - router 는 일부 핵심 API router - router - dom 에 만 더 많은 옵션 을 제공 합 니 다.
경로 모드: hash HashRouter (hash 모드 테이프 \ # 번 호 를 새로 고 칠 때 페이지 를 잃 어 버 리 지 않 습 니 다) browser BrowserRouter 역사 기록 모드 가 없습니다.
2. index. js 참조 루트 모듈
3. 루트 모드 패키지 루트 구성 요소 ReactDOM. render (, document. getElement ById ('root'));
4 import {Route} from 'react - router - dom'
5 루트 설정
경로 탐색 Link to = "어디 가" NavLink 는 선택 한 내 비게 이 션 에 active 클래스 이름 을 동적 으로 추가 할 수 있 습 니 다.
26.redux
// redux javascript ( )
// react
// redux （ vue react ）
//
//
//
//
// ：
// 1. react store
// 2.state state redux
// 3. ： action redux state
// npm install --save redux
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
전단 자동화 워 크 플 로 의 hooks예 를 들 어 우 리 는 git commt 전에 eslint 코드 검사, npm install 전에 프로젝트 의존 도 를 검사 하고 싶 습 니 다.전형 적 인 상황 에서 각종 도 구 는 특정한 동작 이 발생 할 때 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
